<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>Hexo标签笔记 | CC的部落格</title><meta name="author" content="CC康纳百川"><meta name="copyright" content="CC康纳百川"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><article data-clarity-region="article"></article><meta name="description" content="CC的部落格 Hexo标签笔记"><meta property="og:type" content="article"><meta property="og:title" content="Hexo标签笔记"><meta property="og:url" content="https://blog.ccknbc.cc/posts/introduction-of-plugin-tags-based-on-butterfly/"><meta property="og:site_name" content="CC的部落格"><meta property="og:description" content="CC的部落格 Hexo标签笔记"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/666ccfeb387717d69a0e3333cc1170dc_w1004_h591_s48.jpg"><meta property="article:published_time" content="2021-03-05T04:00:00.000Z"><meta property="article:modified_time" content="2021-05-16T04:00:00.000Z"><meta property="article:author" content="CC康纳百川"><meta property="article:tag" content="博客"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/666ccfeb387717d69a0e3333cc1170dc_w1004_h591_s48.jpg"><link rel="shortcut icon" href="/favicon.ico"><link rel="canonical" href="https://blog.ccknbc.cc/posts/introduction-of-plugin-tags-based-on-butterfly/"><link rel="preconnect" href="https://jsd.cdn.zzko.cn"><link rel="preconnect" href="//static.cloudflareinsights.com"><link rel="preconnect" href="//www.clarity.ms"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="preconnect" href="https://97MUPN4DMC-dsn.algolia.net" crossorigin=""><meta name="google-site-verification" content="tUkgeN6Ih2ArWtjw47oNSSl4Af2_MWjiKLrzZptUCdM"><meta name="msvalidate.01" content="71ADBCC80D679CEA8080BAFDCD54E368"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/@fancyapps/ui/dist/fancybox/fancybox.css" media="print" onload='this.media="all"'><script>(()=>{const t={set:(e,t,a)=>{var o;0!==a&&(o=Date.now(),localStorage.setItem(e,JSON.stringify({value:t,expiry:o+864e5*a})))},get:e=>{var t=localStorage.getItem(e);if(t){t=JSON.parse(t);if(!(Date.now()>t.expiry))return t.value;localStorage.removeItem(e)}}},a=(window.btf={saveToLocal:t,getScript:(o,n={})=>new Promise((t,e)=>{const a=document.createElement("script");a.src=o,a.async=!0,a.onerror=e,a.onload=a.onreadystatechange=function(){var e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},Object.keys(n).forEach(e=>{a.setAttribute(e,n[e])}),document.head.appendChild(a)}),getCSS:(o,n=!1)=>new Promise((t,e)=>{const a=document.createElement("link");a.rel="stylesheet",a.href=o,n&&(a.id=n),a.onerror=e,a.onload=a.onreadystatechange=function(){var e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)}),addGlobalFn:(e,t,a=!1,o=window)=>{var n=o.globalFn||{},d=n[e]||{};a&&d[a]||(d[a=a||Object.keys(d).length]=t,n[e]=d,o.globalFn=n)}},()=>{document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")}),o=()=>{document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","ffffff")};btf.activateDarkMode=a,btf.activateLightMode=o;var e=t.get("theme"),n=window.matchMedia("(prefers-color-scheme: dark)").matches,d=window.matchMedia("(prefers-color-scheme: light)").matches,r=window.matchMedia("(prefers-color-scheme: no-preference)").matches,c=!n&&!d&&!r,n=(void 0===e?(d?o():n?a():(r||c)&&((d=(new Date).getHours())<=6||18<=d?a:o)(),window.matchMedia("(prefers-color-scheme: dark)").addListener(e=>{void 0===t.get("theme")&&(e.matches?a:o)()})):("light"===e?o:a)(),t.get("aside-status"));void 0!==n&&("hide"===n?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})()</script><script defer data-pjax="data-pjax" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{&quot;token&quot;: &quot;35785b58f09f472ebfd7a2854973e6b8&quot;}"></script><script>!function(t,e,n,a,c,r){t[n]=t[n]||function(){(t[n].q=t[n].q||[]).push(arguments)},(c=e.createElement(a)).async=1,c.src="https://www.clarity.ms/tag/an4gdfm6a9",(r=e.getElementsByTagName(a)[0]).parentNode.insertBefore(c,r)}(window,document,"clarity","script")</script><script>const GLOBAL_CONFIG={postHeadAiDescription:{enable:!0,gptName:"CC",mode:"tianli",switchBtn:!0,btnLink:"https://tianli-blog.club/tianligpt/",randomNum:3,basicWordCount:1e3,key:"VCtoijR43E2uiVWkrZiC",Referer:"https://blog.ccknbc.cc/"},root:"/",algolia:void 0,localSearch:void 0,translate:{defaultEncoding:2,translateDelay:0,msgToTraditionalChinese:"繁",msgToSimplifiedChinese:"简"},noticeOutdate:{limitDay:15,position:"top",messagePrev:"本文最后一次更新为",messageNext:"天前，文章中的某些内容可能已过时！"},highlight:{plugin:"highlight.js",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:!1,highlightFullpage:!0,highlightMacStyle:!0},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"天",dateSuffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{limitCount:100,languages:{author:"作者: CC康纳百川",link:"链接: ",source:"来源: CC的部落格",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体中文",cht_to_chs:"你已切换为简体中文",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"#49b1f5",bgDark:"#1f1f1f",position:"top-center"},infinitegrid:{js:"https://jsd.cdn.zzko.cn/npm/@egjs/infinitegrid/dist/infinitegrid.min.js",buttonText:"加载更多"},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1,percent:{toc:!0,rightside:!0},autoDarkmode:!0}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={postAI:"CC的部落格 Hexo标签笔记",pageFillDescription:"按钮 Button, 行内, 固定, 居中多个, 按钮 btns, 行内文本样式 text, 行内文本 span, 段落文本 p, 引用 note, 上标标签 tip, 动态标签 anima, 单选列表 radio, 复选列表 checkbox, 时间轴 timeline, 链接卡片 link, github 卡片 ghcard, github 徽标 ghbdage, 网站卡片 sites, 行内图片 inlineimage, 单张图片 image, 音频 audio, 视频 video, 相册 gallery, 隐藏折叠 tag-hide, hide-inline, hide-block, hide-toggle, 折叠框 folding, 分栏 tab, 数据集合 issues, 诗词标签 poem, 进度条 progress, mermaid, 动态图表 chartjs, 媒体 mmedia的部落格标签笔记其中大部分完整转载至糖果屋店长原文根据本站实际情况进行了增减仅保留源码和参数说明部分若要查看具体效果可前往糖果屋教程贴按钮行内固定居中多个按钮样式参数标题链接图片或者图标标题链接图片或者图标圆角样式增加文字样式可以在容器内增加标题和描述文字布局方式默认为自动宽度适合视野内只有一两个的情况参数含义宽一点的按钮填充布局自动铺满至少一行多了会换行居中按钮之间是固定间距居中分散等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数行内文本样式文本内容文本内容文本内容文本内容文本内容文本内容文本内容标签颜色注释词汇悬停显示的注解内容行内文本样式参数参数以空格划分文本内容字体颜色大小对齐方向彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字康纳百川康纳百川段落文本样式参数参数以空格划分文本内容字体颜色大小对齐方向彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字引用修改主题配置文件标签有两种用法和只对方法一生效方法一方法二方法一参数用法可选标识不同的标识有不同的配色可选不显示可选可以覆盖配置中的方法二参数用法可选标识不同的标识有不同的配色可选可配置自定义只支持图标也可以配置可选可以覆盖配置中的方法一样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签方法二样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器上标标签主要样式参考自小康的渐变背景标签自己写了个来渲染标签精简了一下代码参数可选文本内容样式自定义图标支持默认情况自定义图标动态标签参数可选文本内容更多详情请参看文档将所需的类添加到图标或中的任何元素对于父级悬停样式需要给目标元素添加指定类同时还要给目标元素的父级元素添加类详情见示例及示例源码可以通过给目标元素添加类或来控制动画快慢当页面加载时显示动画当鼠标悬停时显示动画当鼠标悬停在父级元素时显示动画当页面加载时显示动画调整动画速度当鼠标悬停时显示动画当鼠标悬停在父级元素时显示动画单选列表样式参数可选文本支持简单颜色选中状态纯文本测试支持简单的语法支持自定义颜色绿色黄色青色蓝色复选列表样式参数可选文本支持简单样式颜色选中状态纯文本测试支持简单的语法支持自定义颜色绿色默认选中黄色默认选中青色默认选中蓝色默认选中增加减少叉时间轴时间线标题可选时间节点标题正文内容时间节点标题正文内容链接卡片标题链接图片链接可选卡片使用了的支持直接使用语法来写用户名其它参数可选用户名仓库其它参数可选更多参数可以参考使用分割各个参数写法为参数名参数值以下只写几个常用参数值参数名取值释义隐藏指定统计将私人项目贡献添加到总提交计数中显示图标请查阅主题用户信息卡片仓库信息卡片徽标关于参数的更多具体用法可以参看糖果屋教程添加徽标徽标左边的信息必选参数徽标右边的信息必选参数徽标图标图标名称详见可选参数徽标右边的颜色可选参数指向的链接可选参数徽标的额外信息可选参数主要用于优化但标签不会像标签一样在鼠标悬停显示信息自定义参数支持的全部参数支持具体参数可以参看上文中的拓展写法示例形式为本标签的参数分为三组用分割基本参数定义徽标左右文字和图标信息参数定义徽标右侧内容背景色指向链接本站使用为静态资源提供加速如果是跨顺序省略可选参数仍然需要写个逗号用作分割拓展参数支持的的全部参数内容本站采用双线部署默认线路托管于如果是跨顺序省略可选参数组仍然需要写双竖线用作分割网站卡片标题链接截图链接头像链接可选描述可选标题链接截图链接头像链接可选描述可选行内图片图片链接高度可选高度单张图片链接宽度可选高度可选描述可选占位颜色可选图片宽度高度图片描述图片描述需要在主题配置文件中开启图片描述占位背景色音频音频链接视频视频链接对其方向列数逗号后面直接写列数支持列宽度宽度宽度相册相册图库相册圖片格式相册图库思维拓展一下相册图库的实质其实就是个快捷方式可以自定义添加描述封面链接那么我们未必要把它当做一个相册完全可以作为一个链接卡片链接到视频友链都是不错的选择参数名释义图库名字图库描述链接到对应相册的地址图库封面相册区别于旧版的相册新的相册会自动根据图片长度进行排版书写也更加方便与格式一样可根据需要插入到相应的无需再自己配置长宽建议在粘贴时故意使用长短大小横竖不一的图片会有更好的效果尺寸完全相同的图片只会平铺输出效果很糟糕隐藏折叠描述按钮颜色字体颜色描述描述描述折叠框参数可选标题颜色状态状态填写代表默认打开分栏选项卡块标签的唯一名称不带逗号将在中用作每个标签及其索引号的前缀如果名称中包含空格则对于生成所有空格将由破折号代替仅当前帖子页面的必须是唯一的活动选项卡的索引号如果未指定将选择第一个标签如果为则不会选择任何选项卡可选参数当前选项卡的标题如果未指定标题则带有制表符索引后缀的唯一名称将用作制表符的标题如果未指定标题但指定了图标则标题将为空可选参数图标名称全名看起来像可以指定带空格或不带空格例如和可选参数嵌套数据集合可选类型根据需求不同会将内容解析成不同的标签目前支持的类型有时间轴解析成标签的标题对应的时间的内容对应的内容网站卡片解析成标签需要有代码块各参数对应标签参数参数释义网站名称网站预览图网站链接需要添加协议组成完整域名否则可能被识别成站点相对路径站长头像分组依据未必要叫详见下文分组接口为可以调的通的例如参数释义仓库的仓库的用户名仓库名界定哪些类型的会被读取过来渲染成相应的标签读取前条控制默认的不显示只有自己审核通过添加了标签之后才会显示分组类型的默认不分组如果需要分组可指定分组依据和分组白名单等例如此处的就是上文中的这个参数的作用就是筛选出中包含或者或者的数据并分组显示仓库模板配置因本主题已去化我也不想要这个标签也不怎么用不过那个时间线可以用来发说说什么的所以为了正常显示需要先引入相关依赖这里不再演示请直接查看源码即可时间轴标签渲染网站卡片标签渲染仓库示例仓库示例网站卡片标签分组渲染这是主题官网的示例博客页面的数据版本版本版本诗词标签诗词内容进度条进度条标签参考沂佰孜猫给文章添加彩色进度条源样式提取自主题到的阿拉伯数字颜色取值有进度条上的文字内容动态图表关于预览更多详细内容请分别前往插件文档原文档查看媒体安装与基本介绍哔哩哔哩西瓜视频预览简介是一个能在中快速插入媒体标签的插件目前支持的标签和平台有持续开发中哔哩哔哩西瓜视频使用插件和其他插件使用方法类似诸如如何启用一个插件之类的共性问题就不再赘述了只说相关的安装配置如需修改配置请务必不要保留空选项空选项会覆盖默认配置严重可能直接导致插件无法使用单项使用的文档中会详细讲解对应的使用文档请自行阅读后再做配置下面只是示例请勿全盘复制请看清后面的讲解后组织自己的配置文件持续更新中详情见详细文档和源码解释配置项较多目的是给予最大的自定义权限默认情况下不做配置也可以使用配置文件放在博客根目录的中为默认配置在中填写就不需要在每个标签全部写入了所有允许在标签上写入的配置项均可在下配置下项用于设置类型的默认配置注意要使用格式写默认配置以下是几个示例示例如无法读懂下面的示例请阅读后面的文档后再回来看修改的文件将的和放入博客目录首先请下载和文件放入博客下和下路径只是示例修改循环方式为随机循环修改弹幕使用下面只是快速示例请阅读后面的文档后再回来看示例只是为了展示配置方式瞎写的一些配置不一定正确不要照抄内可以使用两种标签作为插件分别是和使用方式为只使用作为传参方式时两种标签均可使用当需要使用传参时只能使用后面第一个参数用于标记标签可选以详细文档为主持续更新中再后面的参数将直接作为参数直接传入插件参数传入标签的参数可以写入到三个位置分别为其中只有部分插件可使用配置具体看详细文档如有冲突项覆盖规则为后面的会被前面发覆盖插件默认写入到上的参数有两种写法分别是使用和分割两种写法是等效的在遇到第一个或时会自动分割例如两种写法是等效的如果遇到布尔类型的参数可以简写两种写法等效但需要注意或一定不能省略传参支持方式传参其中为规范示例从升级考虑到一部分用户版本使用时间较长迁移成本较高遂将单独发布为一个包可以用版本同时安装详情见版本虽然能兼容使用但建议及时修改文章到版本已不再继续维护开发者要说的几句话这个插件并不完美如果使用中遇到问题请熟读文档如果还是有问题请再读一遍文档还是有问题请向开发者反馈关于重复请求请升级客户端浏览器版本两个一样的只会请求一次暂时没有想到什么好的办法如果有请及时告诉关于这东西真的不想去做兼容其实也不难如果以后闲得无聊的话可能会做但不要催关于兼容的问题不要局限于示例放开手脚大胆去尝试这个插件的开放性真的非常的大介绍可以插入原生标签使用参数此部分请熟读相关介绍使用或分割所有标签的原生参数均可添加只要能写进去就可以具体能否实现相关标准取决于客户端浏览器参数插件允许在部分使用编写配置使用标准配置默认配置可写入下介绍可以插入原生标签使用参数此部分请熟读相关介绍使用或分割所有标签的原生参数均可添加只要能写进去就可以具体能否实现相关标准取决于客户端浏览器参数插件允许在部分使用编写配置使用标准配置默认配置可写入下介绍可以插入标签使用参数此部分请熟读文档使用或分割所有标签的参数均可添加只要能写进去就可以参数插件允许在部分使用编写配置使用标准配置默认配置可写入下介绍可以插入标签使用参数此部分请熟读文档使用或分割详细参数表参数默认解释可选不在表格内的参数请使用下面类型的参数参数插件允许在部分使用编写配置由于允许使用此项配置几乎与完全一致详情请见上方示例配置默认配置可写入下介绍可以插入标签使用参数此部分请熟读文档使用或分割详细参数表参数默认解释上面有一个比较特殊的参数这里单独解释一下这个参数是用于引入其他文件的目前支持的有上述参数可多个一起使用如果后面带有地址将直接使用否则将使用配置或插件默认配置如不在表格内的参数请使用下面类型的参数参数插件允许在部分使用编写配置由于允许使用此项配置几乎与完全一致详情请见上方示例配置默认配置可写入下介绍可以插入标签使用参数此部分请熟读文档使用或分割详细参数表参数默认解释上面有一个比较特殊的参数这里单独解释一下这个参数是用于引入其他文件的目前支持的有上述参数可多个一起使用如果后面带有地址将直接使用否则将使用配置或插件默认配置如不在表格内的参数请使用下面类型的参数参数插件允许在部分使用编写配置由于允许使用此项配置几乎与完全一致详情请见上方示例配置默认配置可写入下介绍可以插入视频使用参数使用或分割详细参数表参数默认解释与同时出现时以为准是否有弹幕允许全屏或允许其他选项不允许见配置属性属性属性参数插件允许在部分使用编写配置使用标准配置默认配置可写入下介绍可以插入西瓜视频使用参数使用或分割详细参数表参数默认解释西瓜视频的就是那一串数字一般情况下不需要填写开始时间秒允许全屏或允许其他选项不允许见配置属性属性属性参数插件允许在部分使用编写配置使用标准配置默认配置可写入下待开发请前往音乐界面预览部分效果分别用到了",title:"Hexo标签笔记",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2021-05-16 12:00:00"}</script><script>"serviceWorker"in navigator&&(navigator.serviceWorker.register("/sw.js",{scope:"/"}).then(r=>{r.onupdatefound=()=>{const e=r.installing;e.onstatechange=()=>{"installed"===e.state&&(navigator.serviceWorker.controller?(void 0!==GLOBAL_CONFIG.Snackbar&&btf.snackbarShow("已刷新缓存，更新为最新内容"),navigator.serviceWorker.controller.postMessage({type:"skipWaiting"})):console.log("第一次注册Service Worker"))}}}),navigator.serviceWorker.addEventListener("message",e=>{e.data&&"refresh"===e.data.type&&(console.log("收到刷新页面请求，开始刷新页面"),window.location.reload())}))</script><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/hexo-butterfly-tag-plugins-plus/lib/assets/font-awesome-animation.min.css" media="defer" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.css" media="defer" onload='this.media="all"'><meta name="generator" content="Hexo 7.2.0"><link rel="alternate" href="/atom.xml" title="CC的部落格" type="application/atom+xml"><link rel="alternate" href="/rss.xml" title="CC的部落格" type="application/rss+xml"></head><body><script>window.paceOptions={restartOnPushState:!1},btf.addGlobalFn("pjaxSend",()=>{Pace.restart()},"pace_restart")</script><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/gh/CodeByZach/pace/themes/green/pace-theme-flash.css"><script src="https://jsd.cdn.zzko.cn/npm/pace-js/pace.min.js"></script><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/logo.png" onerror='onerror=null,src="https://jsd.cdn.zzko.cn/npm/hexo-theme-anzhiyu/source/img/404.jpg"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">38</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">7</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div><hr class="custom-hr"><div class="menus_items"><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-book-reader"></i><span> 文章</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fa-solid fa-box-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa-solid fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fa-solid fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-cubes"></i><span> 社交</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/blogroll/"><i class="fa-fw fa-solid fa-link"></i><span> 友链</span></a></li><li><a class="site-page child" href="/moments/"><i class="fa-fw fa-solid fa-blog"></i><span> 友圈</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa-solid fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/essay/"><i class="fa-fw fa-solid fa-comment-alt"></i><span> 短文</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-desktop"></i><span> 关于</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/sub/"><i class="fa-fw fa-solid fa-bell"></i><span> 订阅</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fa-solid fa-list-check"></i><span> 本站</span></a></li><li><a class="site-page child" href="/privacy-policy/"><i class="fa-fw fa-solid fa-user-secret"></i><span> 隐私</span></a></li><li><a class="site-page child" target="_blank" rel="noopener external nofollow noreferrer" href="https://cc.instatus.com"><i class="fa-fw fa-solid fa-server"></i><span> 状态</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url(https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/666ccfeb387717d69a0e3333cc1170dc_w1004_h591_s48.jpg)"><nav id="nav"><span id="blog-info"><a href="/" title="CC的部落格"><span class="site-name">CC的部落格</span></a></span><div id="menus"><div id="search-button"><span class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></span></div><div class="menus_items"><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-book-reader"></i><span> 文章</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fa-solid fa-box-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa-solid fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fa-solid fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-cubes"></i><span> 社交</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/blogroll/"><i class="fa-fw fa-solid fa-link"></i><span> 友链</span></a></li><li><a class="site-page child" href="/moments/"><i class="fa-fw fa-solid fa-blog"></i><span> 友圈</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa-solid fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/essay/"><i class="fa-fw fa-solid fa-comment-alt"></i><span> 短文</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-desktop"></i><span> 关于</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/sub/"><i class="fa-fw fa-solid fa-bell"></i><span> 订阅</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fa-solid fa-list-check"></i><span> 本站</span></a></li><li><a class="site-page child" href="/privacy-policy/"><i class="fa-fw fa-solid fa-user-secret"></i><span> 隐私</span></a></li><li><a class="site-page child" target="_blank" rel="noopener external nofollow noreferrer" href="https://cc.instatus.com"><i class="fa-fw fa-solid fa-server"></i><span> 状态</span></a></li></ul></div></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="post-info"><h1 class="post-title">Hexo标签笔记</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-03-05T04:00:00.000Z" title="发表于 2021-03-05 12:00:00">2021-03-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-05-16T04:00:00.000Z" title="更新于 2021-05-16 12:00:00">2021-05-16</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">10.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>49分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" data-flag-title="Hexo标签笔记"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><div class="post-ai-description"><div class="ai-title"><i class="fa-solid fa-newspaper"></i><div class="ai-title-text">AI-摘要</div><div id="ai-Toggle" title="CC/Tianli 模式切换">切换</div><i class="fa-solid fa-podcast" title="Tianli 模式下朗读摘要"></i><i class="fa-solid fa-arrow-rotate-right" title="Tianli 模式下刷新摘要"></i><div id="ai-tag">Tianli GPT</div></div><div class="ai-explanation">AI初始化中...</div><div class="ai-btn-box"><div class="ai-btn-item">介绍自己 🙈</div><div class="ai-btn-item">生成摘要 👋</div><div class="ai-btn-item">相关推荐 📖</div><div class="ai-btn-item">前往主页 🏠</div><div class="ai-btn-item" id="go-tianli-blog">前往爱发电购买</div></div><script data-pjax src="/"></script></div><article class="post-content" id="article-container"><div class="note green success modern"><p>CC 的部落格 Hexo 标签笔记 ，其中大部分完整转载至糖果屋店长原文，根据本站实际情况进行了增减，仅保留源码和参数说明部分，若要查看具体效果，可前往</p><div class="tag link"><a class="link-card" title="糖果屋教程贴" target="_blank" rel="noopener external nofollow noreferrer" href="https://akilar.top/posts/615e2dec/"><div class="left"><img src= "" data-lazy-src="https://cdn.jsdelivr.net/gh/Akilarlxh/akilarlxh.github.io/img/siteicon/favicon.ico"></div><div class="right"><p class="text">糖果屋教程贴</p><p class="url">https://akilar.top/posts/615e2dec/</p></div></a></div><p></p></div><h2 id="按钮-Button">按钮 Button<a class="fa-solid fa-hashtag" href="#按钮-Button"></a></h2><h3 id="行内">行内<a class="fa-solid fa-hashtag" href="#行内"></a></h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btn &#x27;#&#x27;,# %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,outline%&#125;</span><br></pre></td></tr></table></figure><h3 id="固定">固定<a class="fa-solid fa-hashtag" href="#固定"></a></h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,block larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,block center larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,block right blue larger %&#125;</span><br></pre></td></tr></table></figure><h3 id="居中多个">居中多个<a class="fa-solid fa-hashtag" href="#居中多个"></a></h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;btn-center&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,green larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;btn-center&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,outline larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,outline blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,outline pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,outline red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,outline purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,outline orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;#&#x27;,#,far fa-hand-point-right,outline green larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h2 id="按钮-btns">按钮 btns<a class="fa-solid fa-hashtag" href="#按钮-btns"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns 样式参数 %&#125;</span><br><span class="line">&#123;% cell 标题, 链接, 图片或者图标 %&#125;</span><br><span class="line">&#123;% cell 标题, 链接, 图片或者图标 %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure><ol><li>圆角样式：rounded, circle</li><li>增加文字样式：可以在容器内增加 <code>&lt;b&gt;标题&lt;/b&gt;</code>和<code>&lt;p&gt;描述文字&lt;/p&gt;</code></li><li>布局方式：默认为自动宽度，适合视野内只有一两个的情况。<table><thead><tr><th>参数</th><th>含义</th></tr></thead><tbody><tr><td>wide</td><td>宽一点的按钮</td></tr><tr><td>fill</td><td>填充布局，自动铺满至少一行，多了会换行</td></tr><tr><td>center</td><td>居中，按钮之间是固定间距</td></tr><tr><td>around</td><td>居中分散</td></tr><tr><td>grid2</td><td>等宽最多 2 列，屏幕变窄会适当减少列数</td></tr><tr><td>grid3</td><td>等宽最多 3 列，屏幕变窄会适当减少列数</td></tr><tr><td>grid4</td><td>等宽最多 4 列，屏幕变窄会适当减少列数</td></tr><tr><td>grid5</td><td>等宽最多 5 列，屏幕变窄会适当减少列数</td></tr></tbody></table></li></ol><h2 id="行内文本样式-text">行内文本样式 text<a class="fa-solid fa-hashtag" href="#行内文本样式-text"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% u 文本内容 %&#125;</span><br><span class="line">&#123;% emp 文本内容 %&#125;</span><br><span class="line">&#123;% wavy 文本内容 %&#125;</span><br><span class="line">&#123;% del 文本内容 %&#125;</span><br><span class="line">&#123;% kbd 文本内容 %&#125;</span><br><span class="line">&#123;% psw 文本内容 %&#125;</span><br><span class="line">&#123;% label 文本内容 标签颜色 %&#125;</span><br><span class="line">&#123;% nota 注释词汇 , 悬停显示的注解内容 %&#125;</span><br></pre></td></tr></table></figure><h2 id="行内文本-span">行内文本 span<a class="fa-solid fa-hashtag" href="#行内文本-span"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% span 样式参数(参数以空格划分), 文本内容 %&#125;</span><br></pre></td></tr></table></figure><ol><li>字体: logo, code</li><li>颜色: <span class="p red">red</span>,<span class="p yellow">yellow</span>,<span class="p green">green</span>,<span class="p cyan">cyan</span>,<span class="p blue">blue</span>,<span class="p gray">gray</span></li><li>大小: small, h4, h3, h2, h1, large, huge, ultra</li><li>对齐方向: left, center, right</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">  在一段话中方便插入各种颜色的标签，包括：&#123;% span red, 红色 %&#125;、&#123;% span yellow, 黄色 %&#125;、&#123;% span green, 绿色 %&#125;、&#123;% span cyan, 青色 %&#125;、&#123;% span blue, 蓝色 %&#125;、&#123;% span gray, 灰色 %&#125;。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">  文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">  &#123;% span center logo large, 康纳百川 %&#125;</span><br><span class="line">  &#123;% span center small, 康纳百川 %&#125;</span><br></pre></td></tr></table></figure><h2 id="段落文本-p">段落文本 p<a class="fa-solid fa-hashtag" href="#段落文本-p"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% p 样式参数(参数以空格划分), 文本内容 %&#125;</span><br></pre></td></tr></table></figure><ol><li>字体: logo, code</li><li>颜色: <span class="p red">red</span>,<span class="p yellow">yellow</span>,<span class="p green">green</span>,<span class="p cyan">cyan</span>,<span class="p blue">blue</span>,<span class="p gray">gray</span></li><li>大小: small, h4, h3, h2, h1, large, huge, ultra</li><li>对齐方向: left, center, right</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">  在一段话中方便插入各种颜色的标签，包括：&#123;% p red, 红色 %&#125;、&#123;% p yellow, 黄色 %&#125;、&#123;% p green, 绿色 %&#125;、&#123;% p cyan, 青色 %&#125;、&#123;% p blue, 蓝色 %&#125;、&#123;% p gray, 灰色 %&#125;。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">  文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">  &#123;% p center logo large, CC&#x27;s Blog %&#125;</span><br><span class="line">  &#123;% p center small, CC&#x27;s Blog %&#125;</span><br></pre></td></tr></table></figure><h2 id="引用-note">引用 note<a class="fa-solid fa-hashtag" href="#引用-note"></a></h2><p>修改主题配置文件</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">note:</span></span><br><span class="line">  <span class="comment"># Note tag style values:</span></span><br><span class="line">  <span class="comment">#  - simple    bs-callout old alert style. Default.</span></span><br><span class="line">  <span class="comment">#  - modern    bs-callout new (v2-v3) alert style.</span></span><br><span class="line">  <span class="comment">#  - flat      flat callout style with background, like on Mozilla or StackOverflow.</span></span><br><span class="line">  <span class="comment">#  - disabled  disable all CSS styles import of note tag.</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">simple</span></span><br><span class="line">  <span class="attr">icons:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">border_radius:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class="line">  <span class="comment"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class="line">  <span class="attr">light_bg_offset:</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><p><code>Note</code>标签有两种用法。<code>icons</code>和<code>light_bg_offset</code>只对方法一生效。</p><p>方法一</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note [class] [no-icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>方法二</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note [color] [icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>方法一</p><table><thead><tr><th>参数</th><th>用法</th></tr></thead><tbody><tr><td>class</td><td>【可选】标识，不同的标识有不同的配色</td></tr><tr><td>（ default / primary / success / info / warning / danger ）</td><td></td></tr><tr><td>no-icon</td><td>【可选】不显示 icon</td></tr><tr><td>style</td><td>【可选】可以覆盖配置中的 style</td></tr><tr><td>（simple/modern/flat/disabled）</td><td></td></tr></tbody></table><p>方法二</p><table><thead><tr><th>参数</th><th>用法</th></tr></thead><tbody><tr><td>class</td><td>【可选】标识，不同的标识有不同的配色</td></tr><tr><td>（ default / primary / success / info / warning / danger ）</td><td></td></tr><tr><td>no-icon</td><td>【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )</td></tr><tr><td>style</td><td>【可选】可以覆盖配置中的 style</td></tr><tr><td>（simple/modern/flat/disabled）</td><td></td></tr></tbody></table><p>方法一</p><ol><li><code>simple</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note simple %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default simple %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary simple %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success simple %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info simple %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning simple %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger simple %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li><code>modern</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note modern %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default modern %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary modern %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success modern %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info modern %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning modern %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger modern %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li><code>flat</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note flat %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default flat %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary flat %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success flat %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info flat %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning flat %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger flat %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li><code>disabled</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note disabled %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default disabled %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary disabled %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success disabled %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info disabled %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning disabled %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger disabled %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li><code>no-icon</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default no-icon %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary no-icon %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success no-icon %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info no-icon %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning no-icon %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger no-icon %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p>方法二</p><ol><li><code>simple</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; simple %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; simple %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; simple%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; simple %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; simple %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li><code>modern</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; modern %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; modern %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; modern%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; modern %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; modern %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li><code>flat</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; flat %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; flat %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; flat%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; flat %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; flat %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li><code>disabled</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; disabled %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; disabled %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; disabled %&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; disabled %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; disabled %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li><code>no-icon</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note blue no-icon %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note pink no-icon %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note red no-icon %&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note orange no-icon %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note purple no-icon %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note green no-icon %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><h2 id="上标标签-tip">上标标签 tip<a class="fa-solid fa-hashtag" href="#上标标签-tip"></a></h2><div class="tip cogs"><p>主要样式参考自<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.antmoe.com/posts/3b43914f/">小康的 butterfly 渐变背景标签</a>,自己写了个<code>tip.js</code>来渲染标签，精简了一下代码。</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip [参数，可选] %&#125;文本内容&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><ol><li>样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell</li><li>自定义图标: 支持 fontawesome。</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip %&#125;默认情况&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip success %&#125;success&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip error %&#125;error&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip warning %&#125;warning&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip bolt %&#125;bolt&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban %&#125;ban&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip home %&#125;home&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip sync %&#125;sync&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip cogs %&#125;cogs&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip key %&#125;key&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip bell %&#125;bell&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip fa-atom %&#125;自定义 font awesome 图标&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><h2 id="动态标签-anima">动态标签 anima<a class="fa-solid fa-hashtag" href="#动态标签-anima"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip [参数，可选] %&#125;文本内容&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><p>更多详情请参看<a target="_blank" rel="noopener external nofollow noreferrer" href="http://l-lin.github.io/font-awesome-animation/">font-awesome-animation 文档</a></p><ol><li>将所需的 CSS 类添加到图标（或 DOM 中的任何元素）。</li><li>对于父级悬停样式，需要给目标元素添加指定 CSS 类，同时还要给目标元素的父级元素添加 CSS 类<code>faa-parent animated-hover</code>。（详情见示例及示例源码） You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow</li><li>可以通过给目标元素添加 CSS 类<code>faa-fast</code>或<code>faa-slow</code>来控制动画快慢。</li></ol><table><thead><tr><th style="text-align:center">On DOM load<br>当页面加载时<br>显示动画</th><th style="text-align:center">On hover<br>当鼠标悬停时<br>显示动画</th><th style="text-align:center">On parent hover<br>当鼠标悬停<br>在父级元素时<br>显示动画</th></tr></thead><tbody><tr><td style="text-align:center"><span><i class="fas fa-wrench faa-wrench animated"></i> faa-wrench animated</span></td><td style="text-align:center"><span><i class="fas fa-wrench faa-wrench animated-hover"></i> faa-wrench animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-wrench faa-wrench"></i> faa-wrench</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-bell faa-ring animated"></i> faa-ring animated</span></td><td style="text-align:center"><span><i class="fas fa-bell faa-ring animated-hover"></i> faa-ring animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-bell faa-ring"></i> faa-ring</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-envelope faa-horizontal animated"></i> faa-horizontal animated</span></td><td style="text-align:center"><span><i class="fas fa-envelope faa-horizontal animated-hover"></i> faa-horizontal animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-envelope faa-horizontal"></i> faa-horizontal</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-thumbs-up faa-vertical animated"></i> faa-vertical animated</span></td><td style="text-align:center"><span><i class="fas fa-thumbs-up faa-vertical animated-hover"></i> faa-vertical animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-thumbs-up faa-vertical"></i> faa-vertical</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-exclamation-triangle faa-flash animated"></i> faa-flash animated</span></td><td style="text-align:center"><span><i class="fas fa-exclamation-triangle faa-flash animated-hover"></i> faa-flash animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-exclamation-triangle faa-flash"></i> faa-flash</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-thumbs-up faa-bounce animated"></i> faa-bounce animated</span></td><td style="text-align:center"><span><i class="fas fa-thumbs-up faa-bounce animated-hover"></i> faa-bounce animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-thumbs-up faa-bounce"></i> faa-bounce</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-spinner faa-spin animated"></i> faa-spin animated</span></td><td style="text-align:center"><span><i class="fas fa-spinner faa-spin animated-hover"></i> faa-spin animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-spinner faa-spin"></i> faa-spin</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-plane faa-tada animated"></i> faa-tada animated</span></td><td style="text-align:center"><span><i class="fas fa-plane faa-tada animated-hover"></i> faa-tada animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-plane faa-tada"></i> faa-tada</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-heart faa-pulse animated"></i> faa-pulse animated</span></td><td style="text-align:center"><span><i class="fas fa-heart faa-pulse animated-hover"></i> faa-pulse animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-heart faa-pulse"></i> faa-pulse</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-envelope faa-shake animated"></i> faa-shake animated</span></td><td style="text-align:center"><span><i class="fas fa-envelope faa-shake animated-hover"></i> faa-shake animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-envelope faa-shake"></i> faa-shake</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-trophy faa-tada animated"></i> faa-tada animated</span></td><td style="text-align:center"><span><i class="fas fa-trophy faa-tada animated-hover"></i> faa-tada animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-trophy faa-tada"></i> faa-tada</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-space-shuttle faa-passing animated"></i> faa-passing animated</span></td><td style="text-align:center"><span><i class="fas fa-space-shuttle faa-passing animated-hover"></i> faa-passing animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-space-shuttle faa-passing"></i> faa-passing</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-space-shuttle faa-passing-reverse animated"></i> faa-passing-reverse animated</span></td><td style="text-align:center"><span><i class="fas fa-space-shuttle faa-passing-reverse animated-hover"></i> faa-passing-reverse animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-space-shuttle faa-passing-reverse"></i> faa-passing-reverse</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-circle faa-burst animated"></i> faa-burst animated</span></td><td style="text-align:center"><span><i class="fas fa-circle faa-burst animated-hover"></i> faa-burst animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-circle faa-burst"></i> faa-burst</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-star faa-falling animated"></i> faa-falling animated</span></td><td style="text-align:center"><span><i class="fas fa-star faa-falling animated-hover"></i> faa-falling animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-star faa-falling"></i> faa-falling</span></td></tr><tr><td style="text-align:center"><span><i class="fas fa-rocket faa-rising animated"></i> faa-rising animated</span></td><td style="text-align:center"><span><i class="fas fa-rocket faa-rising animated-hover"></i> faa-rising animated-hover</span></td><td style="text-align:center"><span class="faa-parent animated-hover"><i class="fas fa-rocket faa-rising"></i> faa-rising</span></td></tr></tbody></table><ol><li>On DOM load（当页面加载时显示动画）</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip warning faa-horizontal animated %&#125;warning&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban faa-flash animated %&#125;ban&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>调整动画速度</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip warning faa-horizontal animated faa-fast %&#125;warning&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban faa-flash animated faa-slow %&#125;ban&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>On hover（当鼠标悬停时显示动画）</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip warning faa-horizontal animated-hover %&#125;warning&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban faa-flash animated-hover %&#125;ban&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>On parent hover（当鼠标悬停在父级元素时显示动画）</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip warning faa-parent animated-hover %&#125;<span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;faa-horizontal&quot;</span>&gt;</span></span>warning<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span>&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban faa-parent animated-hover %&#125;<span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;faa-flash&quot;</span>&gt;</span></span>ban<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span>&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><h2 id="单选列表-radio">单选列表 radio<a class="fa-solid fa-hashtag" href="#单选列表-radio"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% radio 样式参数（可选）, 文本（支持简单md） %&#125;</span><br></pre></td></tr></table></figure><ol><li>颜色: <span class="p red">red</span>,<span class="p yellow">yellow</span>,<span class="p green">green</span>,<span class="p cyan">cyan</span>,<span class="p blue">blue</span>,<span class="p gray">gray</span></li><li>选中状态: checked</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% radio 纯文本测试 %&#125;</span><br><span class="line">&#123;% radio checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %&#125;</span><br><span class="line">&#123;% radio red, 支持自定义颜色 %&#125;</span><br><span class="line">&#123;% radio green, 绿色 %&#125;</span><br><span class="line">&#123;% radio yellow, 黄色 %&#125;</span><br><span class="line">&#123;% radio cyan, 青色 %&#125;</span><br><span class="line">&#123;% radio blue, 蓝色 %&#125;</span><br></pre></td></tr></table></figure><h2 id="复选列表-checkbox">复选列表 checkbox<a class="fa-solid fa-hashtag" href="#复选列表-checkbox"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% checkbox 样式参数（可选）, 文本（支持简单md） %&#125;</span><br></pre></td></tr></table></figure><ol><li>样式: plus, minus, times</li><li>颜色: <span class="p red">red</span>,<span class="p yellow">yellow</span>,<span class="p green">green</span>,<span class="p cyan">cyan</span>,<span class="p blue">blue</span>,<span class="p gray">gray</span></li><li>选中状态: checked</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% checkbox 纯文本测试 %&#125;</span><br><span class="line">&#123;% checkbox checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %&#125;</span><br><span class="line">&#123;% checkbox red, 支持自定义颜色 %&#125;</span><br><span class="line">&#123;% checkbox green checked, 绿色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox yellow checked, 黄色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox cyan checked, 青色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox blue checked, 蓝色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox plus green checked, 增加 %&#125;</span><br><span class="line">&#123;% checkbox minus yellow checked, 减少 %&#125;</span><br><span class="line">&#123;% checkbox times red checked, 叉 %&#125;</span><br></pre></td></tr></table></figure><h2 id="时间轴-timeline">时间轴 timeline<a class="fa-solid fa-hashtag" href="#时间轴-timeline"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 时间线标题（可选） %&#125;</span><br><span class="line">&#123;% timenode 时间节点（标题） %&#125;</span><br><span class="line">正文内容</span><br><span class="line">&#123;% endtimenode %&#125;</span><br><span class="line">&#123;% timenode 时间节点（标题） %&#125;</span><br><span class="line">正文内容</span><br><span class="line">&#123;% endtimenode %&#125;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><h2 id="链接卡片-link">链接卡片 link<a class="fa-solid fa-hashtag" href="#链接卡片-link"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% link 标题, 链接, 图片链接（可选） %&#125;</span><br></pre></td></tr></table></figure><h2 id="github-卡片-ghcard">github 卡片 ghcard<a class="fa-solid fa-hashtag" href="#github-卡片-ghcard"></a></h2><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>ghcard 使用了<code>github-readme-stats</code>的 API，支持直接使用 markdown 语法来写。</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% ghcard 用户名, 其它参数（可选） %&#125;</span><br><span class="line">&#123;% ghcard 用户名/仓库, 其它参数（可选） %&#125;</span><br></pre></td></tr></table></figure><p>更多参数可以参考：</p><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/anuraghazra/github-readme-stats"><img src= "" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_owner=true"></a><p>使用<code>,</code>分割各个参数。写法为：<code>参数名=参数值</code>以下只写几个常用参数值。</p><table><thead><tr><th>参数名</th><th>取值</th><th>释义</th></tr></thead><tbody><tr><td>hide</td><td>stars,commits,prs,issues,contribs</td><td>隐藏指定统计</td></tr><tr><td>count_private</td><td>true</td><td>将私人项目贡献添加到总提交计数中</td></tr><tr><td>show_icons</td><td>true</td><td>显示图标</td></tr><tr><td>theme</td><td>请查阅 Available Themes</td><td>主题</td></tr></tbody></table><ol><li>用户信息卡片</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">| &#123;% ghcard ccknbc %&#125;                | &#123;% ghcard ccknbc, theme=vue %&#125;             |</span><br><span class="line">| ---------------------------------- | ------------------------------------------ |</span><br><span class="line">| &#123;% ghcard ccknbc, theme=buefy %&#125;   | &#123;% ghcard ccknbc, theme=solarized-light %&#125; |</span><br><span class="line">| &#123;% ghcard ccknbc, theme=onedark %&#125; | &#123;% ghcard ccknbc, theme=solarized-dark %&#125;  |</span><br><span class="line">| &#123;% ghcard ccknbc, theme=algolia %&#125; | &#123;% ghcard ccknbc, theme=calm %&#125;            |</span><br></pre></td></tr></table></figure><ol start="2"><li>仓库信息卡片</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">| &#123;% ghcard ccknbc-actions/blogroll %&#125;                | &#123;% ghcard ccknbc-actions/blogroll, theme=vue %&#125;             |</span><br><span class="line">| --------------------------------------------------- | ----------------------------------------------------------- |</span><br><span class="line">| &#123;% ghcard ccknbc-actions/blogroll, theme=buefy %&#125;   | &#123;% ghcard ccknbc-actions/blogroll, theme=solarized-light %&#125; |</span><br><span class="line">| &#123;% ghcard ccknbc-actions/blogroll, theme=onedark %&#125; | &#123;% ghcard ccknbc-actions/blogroll, theme=solarized-dark %&#125;  |</span><br><span class="line">| &#123;% ghcard ccknbc-actions/blogroll, theme=algolia %&#125; | &#123;% ghcard ccknbc-actions/blogroll, theme=calm %&#125;            |</span><br></pre></td></tr></table></figure><h2 id="github-徽标-ghbdage">github 徽标 ghbdage<a class="fa-solid fa-hashtag" href="#github-徽标-ghbdage"></a></h2><div class="tip cogs"><p>关于 ghbdage 参数的更多具体用法可以参看糖果屋教程：<a target="_blank" rel="noopener external nofollow noreferrer" href="https://akilar.top/posts/e87ad7f8">添加 github 徽标</a></p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% bdage [right],[left],[logo]||[color],[link],[title]||[option] %&#125;</span><br></pre></td></tr></table></figure><ol><li><code>left</code>：徽标左边的信息，必选参数。</li><li><code>right</code>: 徽标右边的信息，必选参数，</li><li><code>logo</code>：徽标图标，图标名称详见<a target="_blank" rel="noopener external nofollow noreferrer" href="https://simpleicons.org/">simpleicons</a>，可选参数。</li><li><code>color</code>：徽标右边的颜色，可选参数。</li><li><code>link</code>：指向的链接，可选参数。</li><li><code>title</code>：徽标的额外信息，可选参数。主要用于优化 SEO，但<code>object</code>标签不会像<code>a</code>标签一样在鼠标悬停显示<code>title</code>信息。</li><li><code>option</code>：自定义参数，支持<a target="_blank" rel="noopener external nofollow noreferrer" href="https://shields.io/">shields.io</a>的全部 API 参数支持，具体参数可以参看上文中的拓展写法示例。形式为<code>name1=value2&amp;name2=value2</code>。</li></ol><div class="note info modern"><p>本标签的参数分为三组，用<code>||</code>分割。</p></div><ol><li>基本参数,定义徽标左右文字和图标</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% bdage Theme,Butterfly %&#125;</span><br><span class="line">&#123;% bdage Frame,Hexo,hexo %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>信息参数，定义徽标右侧内容背景色，指向链接</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %&#125;</span><br><span class="line">//如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割</span><br><span class="line">&#123;% bdage Source,GitHub,GitHub||,https://github.com/ %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>拓展参数，支持 shields 的 API 的全部参数内容</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署，默认线路托管于Vercel||style=social&amp;logoWidth=20 %&#125;</span><br><span class="line">//如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割</span><br><span class="line">&#123;% bdage Hosted,Vercel,Vercel||||style=social&amp;logoWidth=20&amp;logoColor=violet %&#125;</span><br></pre></td></tr></table></figure><h2 id="网站卡片-sites">网站卡片 sites<a class="fa-solid fa-hashtag" href="#网站卡片-sites"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% sitegroup %&#125;</span><br><span class="line">&#123;% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %&#125;</span><br><span class="line">&#123;% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %&#125;</span><br><span class="line">&#123;% endsitegroup %&#125;</span><br></pre></td></tr></table></figure><h2 id="行内图片-inlineimage">行内图片 inlineimage<a class="fa-solid fa-hashtag" href="#行内图片-inlineimage"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% inlineimage 图片链接, height=高度（可选） %&#125;</span><br></pre></td></tr></table></figure><p>高度：height=**px</p><h2 id="单张图片-image">单张图片 image<a class="fa-solid fa-hashtag" href="#单张图片-image"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %&#125;</span><br></pre></td></tr></table></figure><ol><li>图片宽度高度：width=300px, height=32px</li><li>图片描述：alt=图片描述（butterfly 需要在主题配置文件中开启图片描述）</li><li>占位背景色：bg=#f2f2f2</li></ol><h2 id="音频-audio">音频 audio<a class="fa-solid fa-hashtag" href="#音频-audio"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% audio 音频链接 %&#125;</span><br></pre></td></tr></table></figure><h2 id="视频-video">视频 video<a class="fa-solid fa-hashtag" href="#视频-video"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% video 视频链接 %&#125;</span><br></pre></td></tr></table></figure><ol><li>对其方向：left, center, right</li><li>列数：逗号后面直接写列数，支持 1 ～ 4 列。</li><li>100%宽度</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% video https://file.nmb.show/down.php/86c301fbc6183f50fb0487e13e5a1f64.mp4 %&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>50%宽度</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% videos, 2 %&#125;</span><br><span class="line"></span><br><span class="line">......</span><br><span class="line"></span><br><span class="line">&#123;% endvideos %&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li>25%宽度</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% videos, 4 %&#125;</span><br><span class="line"></span><br><span class="line">......</span><br><span class="line"></span><br><span class="line">&#123;% endvideos %&#125;</span><br></pre></td></tr></table></figure><h2 id="相册-gallery">相册 gallery<a class="fa-solid fa-hashtag" href="#相册-gallery"></a></h2><ol><li>gallerygroup 相册图库</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><ol start="2"><li>gallery 相册</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">markdown 圖片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><ol><li><p>gallerygroup 相册图库</p><div class="note info flat"><p>思维拓展一下，相册图库的实质其实就是个快捷方式，可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册，完全可以作为一个链接卡片，链接到视频、QQ、友链都是不错的选择。</p></div><table><thead><tr><th>参数名</th><th>释义</th></tr></thead><tbody><tr><td>name</td><td>图库名字</td></tr><tr><td>description</td><td>图库描述</td></tr><tr><td>link</td><td>链接到对应相册的地址</td></tr><tr><td>img-url</td><td>图库封面</td></tr></tbody></table></li><li><p>gallery 相册区别于旧版的 Gallery 相册,新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入到相应的 md。无需再自己配置长宽。<strong>建议在粘贴时故意使用长短、大小、横竖不一的图片</strong>，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）</p></li></ol><h2 id="隐藏折叠-tag-hide">隐藏折叠 tag-hide<a class="fa-solid fa-hashtag" href="#隐藏折叠-tag-hide"></a></h2><h3 id="hide-inline">hide-inline<a class="fa-solid fa-hashtag" href="#hide-inline"></a></h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideInline 描述,按钮颜色,字体颜色 %&#125;</span><br><span class="line">&#123;% hideInline 描述 %&#125;</span><br></pre></td></tr></table></figure><h3 id="hide-block">hide-block<a class="fa-solid fa-hashtag" href="#hide-block"></a></h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideBlock 描述 %&#125;</span><br><span class="line"></span><br><span class="line">......</span><br><span class="line"></span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure><h3 id="hide-toggle">hide-toggle<a class="fa-solid fa-hashtag" href="#hide-toggle"></a></h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideToggle 描述 %&#125;</span><br><span class="line"></span><br><span class="line">......</span><br><span class="line"></span><br><span class="line">&#123;% endhideToggle %&#125;</span><br></pre></td></tr></table></figure><h2 id="折叠框-folding">折叠框 folding<a class="fa-solid fa-hashtag" href="#折叠框-folding"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% folding 参数（可选）, 标题 %&#125;</span><br><span class="line">![](<span class="link">https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg</span>)</span><br><span class="line">&#123;% endfolding %&#125;</span><br></pre></td></tr></table></figure><ol><li>颜色：blue, cyan, green, yellow, red</li><li>状态：状态填写 open 代表默认打开。</li></ol><h2 id="分栏-tab">分栏 tab<a class="fa-solid fa-hashtag" href="#分栏-tab"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs Unique name, [index] %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab [Tab caption] [@icon] --&gt;</span><br><span class="line"></span><br><span class="line">Any content (support inline tags too).</span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><ol><li><p>Unique name :</p><ul><li>选项卡块标签的唯一名称，不带逗号。</li><li>将在#id 中用作每个标签及其索引号的前缀。</li><li>如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。</li><li>仅当前帖子/页面的 URL 必须是唯一的！</li></ul></li><li><p>[index]:</p><ul><li>活动选项卡的索引号。</li><li>如果未指定，将选择第一个标签（1）。</li><li>如果 index 为-1，则不会选择任何选项卡。</li><li>可选参数。</li></ul></li><li><p>[Tab caption]:</p><ul><li>当前选项卡的标题。</li><li>如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。</li><li>如果未指定标题，但指定了图标，则标题将为空。</li><li>可选参数。</li></ul></li><li><p>[@icon]:</p><ul><li>FontAwesome 图标名称（全名，看起来像“ fas fa-font”）</li><li>可以指定带空格或不带空格；</li><li>例如’Tab caption @icon’ 和 ‘Tab caption@icon’.</li><li>可选参数。</li></ul></li></ol><p>嵌套</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% subtabs name %&#125;</span><br><span class="line"></span><br><span class="line">......</span><br><span class="line"></span><br><span class="line">&#123;% endsubtabs %&#125;</span><br></pre></td></tr></table></figure><h2 id="数据集合-issues">数据集合 issues<a class="fa-solid fa-hashtag" href="#数据集合-issues"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% issues type | api=url | group=key:value1,value2（可选） %&#125;</span><br></pre></td></tr></table></figure><p>type(类型) 根据需求不同，会将 issues 内容解析成不同的 HTML 标签，目前支持的类型有：</p><ol><li>时间轴<code>timeline</code>: 解析成<code>timeline</code>标签，<code>issue</code>的标题对应<code>timeline</code>的时间，<code>issue</code>的内容对应<code>timeline</code>的内容。</li><li>网站卡片<code>sites</code>: 解析成<code>sites</code>标签，需要有<code>JSON</code>代码块,各参数对应<code>sites</code>标签参数:</li></ol><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;title&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;screenshot&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;avatar&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;description&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;「keywords」&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>参数</th><th>释义</th></tr></thead><tbody><tr><td>title</td><td>网站名称</td></tr><tr><td>screenshot</td><td>网站预览图</td></tr><tr><td>url</td><td>网站链接，需要添加</td></tr></tbody></table><p>``<a target="_blank" rel="noopener external nofollow noreferrer" href="https://xn--ykr2qt8gsxejsk3if6x7cwuv">https://协议组成完整域名</a>。否则可能被识别成站点相对路径。 | | avatar | 站长头像 | | 「keywords」 | 分组依据，未必要叫「keywords」，详见下文 group(分组) |</p><p>api(接口) url 为可以调的通的 API，例如：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&amp;state=open&amp;page=1&amp;per_page=100&amp;labels=active</span><br><span class="line">api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&amp;state=open&amp;page=1&amp;per_page=100&amp;labels=active</span><br></pre></td></tr></table></figure><table><thead><tr><th>参数</th><th>释义</th></tr></thead><tbody><tr><td><a target="_blank" rel="noopener external nofollow noreferrer" href="https://gitee.com/api/v5/">https://gitee.com/api/v5/</a></td><td>gitee 仓库的 api</td></tr><tr><td><a target="_blank" rel="noopener external nofollow noreferrer" href="https://api.github.com/">https://api.github.com/</a></td><td>github 仓库的 api</td></tr><tr><td>repos/xaoxuu/friends/issues</td><td>repos/用户名/仓库名/issues</td></tr><tr><td>sort=updated&amp;state=open</td><td>界定哪些类型的``issues 会</td></tr><tr><td>被读取过来渲染成相应的标签</td><td></td></tr><tr><td>page=1&amp;per_page=100</td><td>读取前 100 条 issues</td></tr><tr><td>labels=active</td><td>控制默认的 issue 不显示，</td></tr></tbody></table><p>只有自己审核通过添加了 active 标签之后才会显示 |</p><p>group(分组) <code>sites</code>类型的<code>issues</code>默认不分组，如果需要分组，可指定分组依据<code>「keywords」</code>，和分组白名单<code>「value1」</code>、<code>「value2」</code>等，例如：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">group=version:v4,v3,v2</span></span><br><span class="line"><span class="comment"># 此处的version就是上文中的「keywords」</span></span><br></pre></td></tr></table></figure><p>这个参数的作用就是，筛选出<code>JSON</code>中包含<code>&quot;version&quot;: &quot;v4&quot;</code>或者<code>&quot;version&quot;:&quot;v3&quot;</code>或者<code>&quot;version&quot;: &quot;v2&quot;</code>的数据，并分组显示。</p><p>仓库 ISSUES 模板配置</p><p>因本主题已去 jquery 化（我也不想要，这个标签也不怎么用，不过那个时间线可以用来发说说什么的），所以为了正常显示需要先引入相关依赖，这里不再演示，请直接查看源码即可</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">defer</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">defer</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure><ul><li>时间轴标签<code>timeline</code>渲染</li></ul><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% issues timeline | api=https://gitee.com/api/v5/repos/xaoxuu/timeline/issues?state=open&amp;creator=xaoxuu&amp;sort=created&amp;direction=desc&amp;page=1&amp;per<span class="emphasis">_page=100 %&#125;</span></span><br></pre></td></tr></table></figure><ul><li>网站卡片标签<code>sites</code>渲染<ul><li>gitee 仓库示例</li></ul></li></ul><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% issues sites | api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&amp;state=open&amp;page=1&amp;per<span class="emphasis">_page=100&amp;labels=active %&#125;</span></span><br></pre></td></tr></table></figure><ul><li>github 仓库示例</li></ul><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&amp;state=open&amp;page=1&amp;per<span class="emphasis">_page=100&amp;labels=active %&#125;</span></span><br></pre></td></tr></table></figure><ul><li>网站卡片标签<code>sites</code>分组渲染这是<code>Volantis</code>主题官网的「示例博客」页面的数据：</li></ul><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% issues sites | api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&amp;state=open&amp;page=1&amp;per<span class="emphasis">_page=100 | group=version:版本：^4.0,版本：^3.0,版本：^2.0 %&#125;</span></span><br></pre></td></tr></table></figure><h2 id="诗词标签-poem">诗词标签 poem<a class="fa-solid fa-hashtag" href="#诗词标签-poem"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% poem [title],[author] %&#125;</span><br><span class="line">诗词内容</span><br><span class="line">&#123;% endpoem %&#125;</span><br></pre></td></tr></table></figure><h2 id="进度条-progress">进度条 progress<a class="fa-solid fa-hashtag" href="#进度条-progress"></a></h2><div class="note info morden flat"><p>进度条标签参考<a target="_blank" rel="noopener external nofollow noreferrer" href="https://rongbuqiu.com/jdt.html">沂佰孜猫-给 HEXO 文章添加彩色进度条</a>。源样式提取自<a target="_blank" rel="noopener external nofollow noreferrer" href="https://zwying0814.gitbook.io/cuteen/">Cuteen</a>主题。</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% progress [width] [color] [text] %&#125;</span><br></pre></td></tr></table></figure><ol><li><code>width</code>: 0 到 100 的阿拉伯数字</li><li><code>color</code>: 颜色，取值有<span class="p red">red</span>,<span class="p yellow">yellow</span>,<span class="p green">green</span>,<span class="p cyan">cyan</span>,<span class="p blue">blue</span>,<span class="p gray">gray</span></li><li><code>text</code>:进度条上的文字内容</li></ol><h2 id="mermaid">mermaid<a class="fa-solid fa-hashtag" href="#mermaid"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">pie</span><br><span class="line">title Key elements in Product X</span><br><span class="line">&quot;Calcium&quot; : 42.96</span><br><span class="line">&quot;Potassium&quot; : 50.05</span><br><span class="line">&quot;Magnesium&quot; : 10.01</span><br><span class="line">&quot;Iron&quot; : 5</span><br><span class="line">&#123;% endmermaid %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">gantt</span><br><span class="line">title A Gantt Diagram</span><br><span class="line">dateFormat YYYY-MM-DD</span><br><span class="line">section Section</span><br><span class="line">A task :a1, 2014-01-01, 30d</span><br><span class="line">Another task :after a1 , 20d</span><br><span class="line">section Another</span><br><span class="line">Task in sec :2014-01-12 , 12d</span><br><span class="line">another task : 24d</span><br><span class="line">&#123;% endmermaid %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">gantt</span><br><span class="line">title A Gantt Diagram</span><br><span class="line">dateFormat YYYY-MM-DD</span><br><span class="line">section Section</span><br><span class="line">A task :a1, 2014-01-01, 30d</span><br><span class="line">Another task :after a1 , 20d</span><br><span class="line">section Another</span><br><span class="line">Task in sec :2014-01-12 , 12d</span><br><span class="line">another task : 24d</span><br><span class="line">&#123;% endmermaid %&#125;</span><br></pre></td></tr></table></figure><h2 id="动态图表-chartjs">动态图表 chartjs<a class="fa-solid fa-hashtag" href="#动态图表-chartjs"></a></h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% chart 90% 300 %&#125;</span><br><span class="line">&#123;</span><br><span class="line">type: &#x27;line&#x27;,</span><br><span class="line">data: &#123;</span><br><span class="line">labels: [&#x27;January&#x27;, &#x27;February&#x27;, &#x27;March&#x27;, &#x27;April&#x27;, &#x27;May&#x27;, &#x27;June&#x27;, &#x27;July&#x27;],</span><br><span class="line">datasets: [&#123;</span><br><span class="line">label: &#x27;My First dataset&#x27;,</span><br><span class="line">backgroundColor: &#x27;rgb(255, 99, 132)&#x27;,</span><br><span class="line">borderColor: &#x27;rgb(255, 99, 132)&#x27;,</span><br><span class="line">data: [0, 10, 5, 2, 20, 30, 45]</span><br><span class="line">&#125;]</span><br><span class="line">&#125;,</span><br><span class="line">options: &#123;</span><br><span class="line">responsive: true,</span><br><span class="line">title: &#123;</span><br><span class="line">display: true,</span><br><span class="line">text: &#x27;Chart.js Line Chart&#x27;</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endchart %&#125;</span><br></pre></td></tr></table></figure><p>关于预览，更多详细内容，请分别前往 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://shen-yu.gitee.io/2020/chartjs">插件文档</a> | <a target="_blank" rel="noopener external nofollow noreferrer" href="https://chartjs.bootcss.com/docs">原文档</a> 查看</p><h2 id="媒体-mmedia">媒体 mmedia<a class="fa-solid fa-hashtag" href="#媒体-mmedia"></a></h2><div class="tabs" id="mmedia"><ul class="nav-tabs"><button type="button" class="tab" data-href="mmedia-1">安装与基本介绍</button><button type="button" class="tab" data-href="mmedia-2">Audio</button><button type="button" class="tab" data-href="mmedia-3">Video</button><button type="button" class="tab" data-href="mmedia-4">Meting</button><button type="button" class="tab" data-href="mmedia-5">Aplayer</button><button type="button" class="tab" data-href="mmedia-6">Dplayer</button><button type="button" class="tab" data-href="mmedia-7">Artplayer</button><button type="button" class="tab" data-href="mmedia-8">哔哩哔哩</button><button type="button" class="tab" data-href="mmedia-9">西瓜视频</button><button type="button" class="tab" data-href="mmedia-10">YouTube</button><button type="button" class="tab active" data-href="mmedia-11">预览</button></ul><div class="tab-contents"><div class="tab-item-content" id="mmedia-1"><p>简介</p><p>hexo-tag-mmedia 是一个能在 Hexo 中快速插入媒体标签的插件，目前支持的标签和平台有（持续开发中）：</p><ul class="contains-task-list"><li class="task-list-item"><input class="task-list-item-checkbox" checked disabled type="checkbox"> Audio</li><li class="task-list-item"><input class="task-list-item-checkbox" checked disabled type="checkbox"> Video</li><li class="task-list-item"><input class="task-list-item-checkbox" checked disabled type="checkbox"> <a href="%5Bhttps://github.com/DIYgod/APlayer">Aplayer</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/DIYgod/APlayer">https://github.com/DIYgod/APlayer</a>))</li><li class="task-list-item"><input class="task-list-item-checkbox" checked disabled type="checkbox"> <a href="%5Bhttps://github.com/metowolf/MetingJS">MetingJS</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/metowolf/MetingJS">https://github.com/metowolf/MetingJS</a>))</li><li class="task-list-item"><input class="task-list-item-checkbox" checked disabled type="checkbox"> <a href="%5Bhttps://github.com/DIYgod/DPlayer">Dplayer</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/DIYgod/DPlayer">https://github.com/DIYgod/DPlayer</a>))</li><li class="task-list-item"><input class="task-list-item-checkbox" checked disabled type="checkbox"> <a href="%5Bhttps://www.bilibili.com/">哔哩哔哩</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.bilibili.com/">https://www.bilibili.com/</a>))</li><li class="task-list-item"><input class="task-list-item-checkbox" checked disabled type="checkbox"> <a href="%5Bhttps://www.ixigua.com/">西瓜视频</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.ixigua.com/">https://www.ixigua.com/</a>))</li><li class="task-list-item"><input class="task-list-item-checkbox" disabled type="checkbox"> <a href="">YouTube</a></li><li class="task-list-item"><input class="task-list-item-checkbox" checked disabled type="checkbox"> <a href="%5Bhttps://github.com/zhw2590582/ArtPlayer">ArtPlayer</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/zhw2590582/ArtPlayer">https://github.com/zhw2590582/ArtPlayer</a>))</li></ul><p>DEMO</p><p>[<a target="_blank" rel="noopener external nofollow noreferrer" href="http://demo.hexo-tag-mmedia.u2sb.com/">http://demo.hexo-tag-mmedia.u2sb.com/</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="http://demo.hexo-tag-mmedia.u2sb.com/%5D(http://demo.hexo-tag-mmedia.u2sb.com/)">http://demo.hexo-tag-mmedia.u2sb.com/](http://demo.hexo-tag-mmedia.u2sb.com/)</a>)</p><p>使用</p><p>hexo-tag-mmedia 插件和其他 hexo 插件使用方法类似，诸如 如何启用一个插件 之类的共性问题就不再赘述了，只说 hexo-tag-mmedia 相关的。</p><p>安装</p><code-group><code-block title="NPM"><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-tag-mmedia@1 --save</span><br></pre></td></tr></table></figure></code-block><code-block title="PNPM" active><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm install hexo-tag-mmedia@1 --save</span><br></pre></td></tr></table></figure></code-block><code-block title="YARN"><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add hexo-tag-mmedia@1 --save</span><br></pre></td></tr></table></figure></code-block></code-group><p>配置</p><p>如需修改配置，请务必不要保留空选项，空选项会覆盖默认配置，严重可能直接导致插件无法使用。</p><p>单项使用的文档中会详细讲解对应的使用文档，请自行阅读后再做配置。</p><p>下面只是示例，请勿全盘复制，请看清后面的讲解后组织自己的配置文件。</p><p>持续更新中，详情见详细文档和 <a href="%5Bhttps://github.com/u2sb/hexo-tag-mmedia/blob/1.x/src/config/config_default.yml">源码</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/u2sb/hexo-tag-mmedia/blob/1.x/src/config/config_default.yml">https://github.com/u2sb/hexo-tag-mmedia/blob/1.x/src/config/config_default.yml</a>))</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">audio:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">  <span class="attr">video:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">  <span class="attr">aplayer:</span></span><br><span class="line">    <span class="attr">js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js)</span></span><br><span class="line">    <span class="attr">css:</span> [<span class="string">https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css</span>]<span class="string">(https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css)</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">contents:</span></span><br><span class="line">  <span class="attr">meting:</span></span><br><span class="line">    <span class="attr">js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js)</span></span><br><span class="line">    <span class="attr">api:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">  <span class="attr">dplayer:</span></span><br><span class="line">    <span class="attr">js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/dplayer@1/dist/DPlayer.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/dplayer@1/dist/DPlayer.min.js)</span></span><br><span class="line">    <span class="attr">hls_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js)</span></span><br><span class="line">    <span class="attr">dash_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js)</span></span><br><span class="line">    <span class="attr">shaka_dash_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js)</span></span><br><span class="line">    <span class="attr">flv_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js)</span></span><br><span class="line">    <span class="attr">webtorrent_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js)</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">contents:</span></span><br><span class="line">  <span class="attr">bilibili:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">page:</span> <span class="number">1</span></span><br><span class="line">      <span class="attr">danmaku:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">allowfullscreen:</span> <span class="string">allowfullscreen</span></span><br><span class="line">      <span class="attr">sandbox:</span> <span class="string">allow-top-navigation</span> <span class="string">allow-same-origin</span> <span class="string">allow-forms</span> <span class="string">allow-scripts</span> <span class="string">allow-popups</span></span><br><span class="line">      <span class="attr">width:</span> <span class="number">100</span><span class="string">%</span></span><br><span class="line">      <span class="attr">max_width:</span> <span class="string">850px</span></span><br><span class="line">      <span class="attr">margin:</span> <span class="string">auto</span></span><br><span class="line">  <span class="attr">xigua:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">autoplay:</span> <span class="literal">false</span></span><br><span class="line">      <span class="attr">startTime:</span> <span class="number">0</span></span><br><span class="line">      <span class="attr">allowfullscreen:</span> <span class="string">allowfullscreen</span></span><br><span class="line">      <span class="attr">sandbox:</span> <span class="string">allow-top-navigation</span> <span class="string">allow-same-origin</span> <span class="string">allow-forms</span> <span class="string">allow-scripts</span> <span class="string">allow-popups</span></span><br><span class="line">      <span class="attr">width:</span> <span class="number">100</span><span class="string">%</span></span><br><span class="line">      <span class="attr">max_width:</span> <span class="string">850px</span></span><br><span class="line">      <span class="attr">margin:</span> <span class="string">auto</span></span><br></pre></td></tr></table></figure><p>解释</p><ul><li>配置项较多目的是给予最大的自定义权限，默认情况下不做配置也可以使用。</li><li>配置文件放在博客根目录的 <code>_config.yml</code> 中</li><li>default 为默认配置，在 <code>_config.yml</code> 中填写就不需要在每个标签全部写入了，所有允许在 mmedia 标签上写入的配置项，均可在 default 下配置。</li><li>default 下 contents 项，用于设置 JSON 类型的默认配置，注意要使用 yaml 格式写默认配置，以下是几个示例。</li></ul><p>示例</p><p>如无法读懂下面的示例，请阅读后面的文档后再回来看。</p><p>修改 Aplayer 的 js 文件：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">aplayer:</span></span><br><span class="line">    <span class="attr">js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js)</span></span><br><span class="line">    <span class="attr">css:</span> [<span class="string">https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css</span>]<span class="string">(https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css)</span></span><br></pre></td></tr></table></figure><p>将 Aplayer 的 JS 和 CSS 放入博客目录：</p><p>首先请下载 <code>APlayer.min.js</code> 和 <code>APlayer.min.js</code> 文件，放入博客下 <code>source/assets/js/</code> 和 <code>source/assets/css/</code> 下（路径只是示例）</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">aplayer:</span></span><br><span class="line">    <span class="attr">js:</span> <span class="string">/assets/js/APlayer.min.js</span></span><br><span class="line">    <span class="attr">css:</span> <span class="string">/assets/css/APlayer.min.css</span></span><br></pre></td></tr></table></figure><p>Meting 修改循环方式为随机循环：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">meting:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">loop:</span> <span class="string">all</span></span><br><span class="line">      <span class="attr">order:</span> <span class="string">random</span></span><br></pre></td></tr></table></figure><p>Dplayer 修改弹幕 API：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">dplayer:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">contents:</span></span><br><span class="line">        <span class="attr">danmaku:</span></span><br><span class="line">          <span class="attr">api:</span> [<span class="string">https://api.prprpr.me/dplayer/v3/</span>]<span class="string">(https://api.prprpr.me/dplayer/v3/)</span></span><br></pre></td></tr></table></figure><p>使用</p><p>下面只是快速示例，请阅读后面的文档后再回来看。示例只是为了展示配置方式瞎写的，一些配置不一定正确，不要照抄。</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;audio&quot; &quot;src:a.mp3&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;aplayer&quot; &quot;name:songName&quot; &quot;url:a.mp3&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;meting&quot; &quot;auto=[<span class="string">https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html&quot;</span>](<span class="link">https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html&quot;</span>) %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;bilibili&quot; &quot;bvid:BV1hb4y1R7xf&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;xigua&quot; &quot;xid=6925997698269053453&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedias &quot;dplayer&quot; &quot;flv:&quot; &quot;url:[<span class="string">https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4&quot;</span>](<span class="link">https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4&quot;</span>) %&#125;</span><br><span class="line">&#123;</span><br><span class="line">&quot;contextmenu&quot;:</span><br><span class="line">[</span><br><span class="line">&#123;</span><br><span class="line">text: &quot;custom1&quot;,</span><br><span class="line">link: &quot;[<span class="string">https://github.com/DIYgod/DPlayer&quot;</span>](<span class="link">https://github.com/DIYgod/DPlayer&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line">]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endmmedias %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedias &quot;aplayer&quot; &quot;autoplay:false&quot; %&#125;</span><br><span class="line">&#123;</span><br><span class="line">&quot;volume&quot;: 0.8,</span><br><span class="line">&quot;audio&quot;:</span><br><span class="line">[</span><br><span class="line">&#123;</span><br><span class="line">&quot;name&quot;: &quot;name1&quot;,</span><br><span class="line">&quot;artist&quot;: &quot;artist1&quot;,</span><br><span class="line">&quot;url&quot;: &quot;url1.mp3&quot;,</span><br><span class="line">&quot;cover&quot;: &quot;cover1.jpg&quot;,</span><br><span class="line">&quot;lrc&quot;: &quot;lrc1.lrc&quot;,</span><br><span class="line">&quot;theme&quot;: &quot;#ebd0c2&quot;</span><br><span class="line">&#125;,</span><br><span class="line">&#123;</span><br><span class="line">&quot;name&quot;: &quot;name2&quot;,</span><br><span class="line">&quot;artist&quot;: &quot;artist2&quot;,</span><br><span class="line">&quot;url&quot;: &quot;url2.mp3&quot;,</span><br><span class="line">&quot;cover&quot;: &quot;cover2.jpg&quot;,</span><br><span class="line">&quot;lrc&quot;: &quot;lrc2.lrc&quot;,</span><br><span class="line">&quot;theme&quot;: &quot;#46718b&quot;</span><br><span class="line">&#125;</span><br><span class="line">]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endmmedias %&#125;</span><br></pre></td></tr></table></figure><p>markdown 内可以使用两种标签作为插件，分别是 <code>mmedia</code> 和 <code>mmedias</code>，使用方式为：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedias %&#125;</span><br><span class="line">&#123;% endmmedias %&#125;</span><br></pre></td></tr></table></figure><p>只使用 <code>args</code> 作为传参方式时，两种标签均可使用，当需要使用 <code>contents</code> 传参时，只能使用 <code>mmedias</code>。</p><p>后面第一个参数用于标记标签，可选（以详细文档为主，持续更新中）：</p><p><code>audio</code> <code>video</code> <code>meting</code> <code>aplayer</code> <code>dplayer</code> <code>bilibili</code> <code>xigua</code></p><p>再后面的参数将直接作为 <code>args</code> 参数直接传入插件。</p><p>参数</p><p>传入标签的参数可以写入到三个位置，分别为：<code>_config.yml</code>，<code>args</code>，<code>contents</code>，其中只有部分插件可使用 <code>contents</code> 配置，具体看详细文档，如有冲突项，覆盖规则为（后面的会被前面发覆盖）：</p><p><code>contents</code> -&gt; <code>args</code> -&gt; <code>_config.yml</code> -&gt; <code>插件默认</code></p><p>写入到 <code>args</code> 上的参数，有两种写法，分别是使用 <code>:</code> 和 <code>=</code> 分割，两种写法是等效的，在遇到第一个 <code>:</code> 或 <code>=</code> 时会自动分割，例如：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;bilibili&quot; &quot;bvid:BV1hb4y1R7xf&quot; %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% mmedia &quot;bilibili&quot; &quot;bvid=BV1hb4y1R7xf&quot; %&#125;</span><br></pre></td></tr></table></figure><p>两种写法是等效的。</p><p>如果遇到布尔类型的参数，可以简写</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;audio&quot; &quot;src:a.mp3&quot; &quot;autoplay:&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;audio&quot; &quot;src:a.mp3&quot; &quot;autoplay:true&quot; %&#125;</span><br></pre></td></tr></table></figure><p>两种写法等效，但需要注意，<code>:</code> 或 <code>=</code> 一定不能省略。</p><p>JSON 传参</p><p>支持 JSON 方式传参，其中 JSON 为 <a href="%5Bhttps://json5.org/">JSON5</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://json5.org/">https://json5.org/</a>)) 规范。</p><p>示例：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedias &quot;aplayer&quot; &quot;autoplay:false&quot; %&#125;</span><br><span class="line">&#123;</span><br><span class="line">&quot;volume&quot;: 0.8,</span><br><span class="line">&quot;audio&quot;:</span><br><span class="line">[</span><br><span class="line">&#123;</span><br><span class="line">&quot;name&quot;: &quot;name1&quot;,</span><br><span class="line">&quot;artist&quot;: &quot;artist1&quot;,</span><br><span class="line">&quot;url&quot;: &quot;url1.mp3&quot;,</span><br><span class="line">&quot;cover&quot;: &quot;cover1.jpg&quot;,</span><br><span class="line">&quot;lrc&quot;: &quot;lrc1.lrc&quot;,</span><br><span class="line">&quot;theme&quot;: &quot;#ebd0c2&quot;</span><br><span class="line">&#125;,</span><br><span class="line">&#123;</span><br><span class="line">&quot;name&quot;: &quot;name2&quot;,</span><br><span class="line">&quot;artist&quot;: &quot;artist2&quot;,</span><br><span class="line">&quot;url&quot;: &quot;url2.mp3&quot;,</span><br><span class="line">&quot;cover&quot;: &quot;cover2.jpg&quot;,</span><br><span class="line">&quot;lrc&quot;: &quot;lrc2.lrc&quot;,</span><br><span class="line">&quot;theme&quot;: &quot;#46718b&quot;</span><br><span class="line">&#125;</span><br><span class="line">]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endmmedias %&#125;</span><br></pre></td></tr></table></figure><p>从 0.x 升级</p><p>考虑到一部分用户 0.x 版本使用时间较长，迁移成本较高，遂将 0.x 单独发布为一个包，可以用 1.x 版本同时安装。</p><p>详情见 <a href="0990.%E7%89%88%E6%9C%AC0.md">0.X 版本</a>。</p><p>虽然能兼容使用，但建议及时修改文章到 1.x ，0.x 版本已不再继续维护。</p><p>开发者要说的几句话</p><ol><li>这个插件并不完美，如果使用中遇到问题，请熟读文档，如果还是有问题，请再读一遍文档，还是有问题，请向开发者反馈。</li><li>关于 JS 重复请求，请升级客户端浏览器版本，两个一样的 JS，只会请求一次，暂时没有想到什么好的办法，如果有，请及时告诉 Aki 。</li><li>关于 pjax，这东西真的不想去做兼容（其实也不难），如果以后闲得无聊的话，可能会做，但不要催 Aki 关于 pjax 兼容的问题。</li><li>不要局限于示例，放开手脚，大胆去尝试，这个插件的开放性真的非常的大。</li></ol></div><div class="tab-item-content" id="mmedia-2"><p>介绍</p><p>可以插入 html5 原生 audio 标签</p><p>使用</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;audio&quot; &quot;src:a.mp3&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;audio&quot; &quot;src:[<span class="string">https://baidu.com/a.mp3&quot;</span>](<span class="link">https://baidu.com/a.mp3&quot;</span>) &quot;autoplay:true&quot; %&#125;</span><br></pre></td></tr></table></figure><p>参数</p><blockquote><p>此部分请熟读 <a href="%5Bhttps://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-audio-element">Audio 相关介绍</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-audio-element">https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-audio-element</a>))</p></blockquote><ul><li>使用 <code>:</code> 或 <code>=</code> 分割。</li><li>所有 <code>&lt;audio&gt;</code> 标签的原生参数均可添加，只要能写进去就可以。</li><li>具体能否实现相关标准，取决于客户端浏览器。</li></ul><p>JSON 参数</p><p>mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。</p><p>配置</p><p>默认配置可写入 <code>_config.yml</code> 下</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">audio:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">autoplay:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">key:</span> <span class="string">vaule</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="mmedia-3"><p>介绍</p><p>可以插入 html5 原生 video 标签</p><p>使用</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;video&quot; &quot;src:a.mp4&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;video&quot; &quot;src:[<span class="string">https://baidu.com/a.mp4&quot;</span>](<span class="link">https://baidu.com/a.mp4&quot;</span>) &quot;autoplay:true&quot; %&#125;</span><br></pre></td></tr></table></figure><p>参数</p><blockquote><p>此部分请熟读 <a href="%5Bhttps://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element">Video 相关介绍</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element">https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element</a>))</p></blockquote><ul><li>使用 <code>:</code> 或 <code>=</code> 分割。</li><li>所有 <code>&lt;video&gt;</code> 标签的原生参数均可添加，只要能写进去就可以。</li><li>具体能否实现相关标准，取决于客户端浏览器。</li></ul><p>JSON 参数</p><p>mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。</p><p>配置</p><p>默认配置可写入 <code>_config.yml</code> 下</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">video:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">autoplay:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">key:</span> <span class="string">vaule</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="mmedia-4"><p>介绍</p><p>可以插入 <a href="%5Bhttps://github.com/metowolf/MetingJS">MetingJS</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/metowolf/MetingJS">https://github.com/metowolf/MetingJS</a>)) 标签。</p><p>使用</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;meting&quot; &quot;auto=[<span class="string">https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html&quot;</span>](<span class="link">https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html&quot;</span>) %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;meting&quot; &quot;server=netease&quot;	&quot;type=playlist&quot;	&quot;id=60198&quot; %&#125;</span><br></pre></td></tr></table></figure><p>参数</p><blockquote><p>此部分请熟读 <a href="%5Bhttps://github.com/metowolf/MetingJS#option">MetingJS 文档</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/metowolf/MetingJS#option">https://github.com/metowolf/MetingJS#option</a>))</p></blockquote><ul><li>使用 <code>:</code> 或 <code>=</code> 分割。</li><li>所有 <code>&lt;meting-js&gt;</code> 标签的参数均可添加，只要能写进去就可以。</li></ul><p>JSON 参数</p><p>mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedias &quot;meting&quot; &quot;server=netease&quot; %&#125;</span><br><span class="line">&#123;</span><br><span class="line">type:&quot;playlist&quot;,</span><br><span class="line">id:&quot;60198&quot;</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endmmedias %&#125;</span><br></pre></td></tr></table></figure><p>配置</p><p>默认配置可写入 <code>_config.yml</code> 下</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">meting:</span></span><br><span class="line">    <span class="attr">js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js)</span></span><br><span class="line">    <span class="attr">api:</span> [<span class="string">http://example.com/api.php</span>]<span class="string">(http://example.com/api.php)</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">key:</span> <span class="string">vaule</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="mmedia-5"><p>介绍</p><p>可以插入 aplayer 标签</p><p>使用</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;aplayer&quot; &quot;name:songName&quot; &quot;url:a.mp3&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedias &quot;aplayer&quot; &quot;autoplay:false&quot; %&#125;</span><br><span class="line">&#123;</span><br><span class="line">&quot;volume&quot;: 0.8,</span><br><span class="line">&quot;audio&quot;:</span><br><span class="line">[</span><br><span class="line">&#123;</span><br><span class="line">&quot;name&quot;: &quot;name1&quot;,</span><br><span class="line">&quot;artist&quot;: &quot;artist1&quot;,</span><br><span class="line">&quot;url&quot;: &quot;url1.mp3&quot;,</span><br><span class="line">&quot;cover&quot;: &quot;cover1.jpg&quot;,</span><br><span class="line">&quot;lrc&quot;: &quot;lrc1.lrc&quot;,</span><br><span class="line">&quot;theme&quot;: &quot;#ebd0c2&quot;</span><br><span class="line">&#125;,</span><br><span class="line">&#123;</span><br><span class="line">&quot;name&quot;: &quot;name2&quot;,</span><br><span class="line">&quot;artist&quot;: &quot;artist2&quot;,</span><br><span class="line">&quot;url&quot;: &quot;url2.mp3&quot;,</span><br><span class="line">&quot;cover&quot;: &quot;cover2.jpg&quot;,</span><br><span class="line">&quot;lrc&quot;: &quot;lrc2.lrc&quot;,</span><br><span class="line">&quot;theme&quot;: &quot;#46718b&quot;</span><br><span class="line">&#125;</span><br><span class="line">]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endmmedias %&#125;</span><br></pre></td></tr></table></figure><p>参数</p><blockquote><p>此部分请熟读 <a href="%5Bhttp://aplayer.js.org/">APlayer 文档</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="http://aplayer.js.org/">http://aplayer.js.org/</a>))</p></blockquote><ul><li>使用 <code>:</code> 或 <code>=</code> 分割。</li></ul><p>详细参数表：</p><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">默认</th><th style="text-align:left">解释</th></tr></thead><tbody><tr><td style="text-align:left">name</td><td style="text-align:left">-</td><td style="text-align:left">audio name</td></tr><tr><td style="text-align:left">artist</td><td style="text-align:left">-</td><td style="text-align:left">audio artist</td></tr><tr><td style="text-align:left">url</td><td style="text-align:left">-</td><td style="text-align:left">audio url</td></tr><tr><td style="text-align:left">cover</td><td style="text-align:left">-</td><td style="text-align:left">audio cover</td></tr><tr><td style="text-align:left">lrc</td><td style="text-align:left">-</td><td style="text-align:left">audio lrc</td></tr><tr><td style="text-align:left">theme</td><td style="text-align:left">-</td><td style="text-align:left">audio theme</td></tr><tr><td style="text-align:left">type</td><td style="text-align:left">auto</td><td style="text-align:left">audio type 可选 ‘auto’, ‘hls’, ‘normal’</td></tr><tr><td style="text-align:left">autoplay</td><td style="text-align:left">false</td><td style="text-align:left">autoplay</td></tr><tr><td style="text-align:left">loop</td><td style="text-align:left">‘all’</td><td style="text-align:left">player loop play, values: ‘all’, ‘one’, ‘none’</td></tr><tr><td style="text-align:left">order</td><td style="text-align:left">‘list’</td><td style="text-align:left">player play order, values: ‘list’, ‘random’</td></tr><tr><td style="text-align:left">volume</td><td style="text-align:left">0.7</td><td style="text-align:left">default volume,</td></tr><tr><td style="text-align:left">tlistMaxHeight</td><td style="text-align:left">-</td><td style="text-align:left">list max height</td></tr></tbody></table><p>不在表格内的参数请使用下面 JSON 类型的参数。</p><p>JSON 参数</p><p>mmedia 插件允许在 contents 部分使用 JSON 编写配置，由于允许使用 JSON5，此项配置几乎与 APlayer 完全一致。</p><p>详情请见上方示例。</p><p>配置</p><p>默认配置可写入 <code>_config.yml</code> 下</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">aplayer:</span></span><br><span class="line">    <span class="attr">js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js)</span></span><br><span class="line">    <span class="attr">css:</span> [<span class="string">https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css</span>]<span class="string">(https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css)</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">contents:</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="mmedia-6"><p>介绍</p><p>可以插入 dplayer 标签。</p><p>使用</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;dplayer&quot; &quot;url:a.mp4&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedias &quot;dplayer&quot; &quot;flv:&quot; &quot;url:[<span class="string">https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4&quot;</span>](<span class="link">https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4&quot;</span>) %&#125;</span><br><span class="line">&#123;</span><br><span class="line">&quot;contextmenu&quot;:</span><br><span class="line">[</span><br><span class="line">&#123;</span><br><span class="line">text: &quot;custom1&quot;,</span><br><span class="line">link: &quot;[<span class="string">https://github.com/DIYgod/DPlayer&quot;</span>](<span class="link">https://github.com/DIYgod/DPlayer&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line">]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endmmedias %&#125;</span><br></pre></td></tr></table></figure><p>参数</p><blockquote><p>此部分请熟读 <a href="%5Bhttp://dplayer.js.org/">DPlayer 文档</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="http://dplayer.js.org/">http://dplayer.js.org/</a>))</p></blockquote><ul><li>使用 <code>:</code> 或 <code>=</code> 分割。</li></ul><p>详细参数表：</p><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">默认</th><th style="text-align:left">解释</th></tr></thead><tbody><tr><td style="text-align:left">url</td><td style="text-align:left">-</td><td style="text-align:left">video.url</td></tr><tr><td style="text-align:left">pic</td><td style="text-align:left">-</td><td style="text-align:left">video.pic</td></tr><tr><td style="text-align:left">thumbnails</td><td style="text-align:left">-</td><td style="text-align:left">video.thumbnails</td></tr><tr><td style="text-align:left">type</td><td style="text-align:left">auto</td><td style="text-align:left">video.type, values: ‘auto’, ‘hls’, ‘flv’, ‘dash’, ‘webtorrent’, ‘normal’ or other</td></tr><tr><td style="text-align:left">autoplay</td><td style="text-align:left">false</td><td style="text-align:left">video autoplay</td></tr><tr><td style="text-align:left">loop</td><td style="text-align:left">false</td><td style="text-align:left">video loop</td></tr><tr><td style="text-align:left">logo</td><td style="text-align:left">-</td><td style="text-align:left">showing logo in the top left corner, you can adjust its size and position by CSS</td></tr><tr><td style="text-align:left">volume</td><td style="text-align:left">0.7</td><td style="text-align:left">default volume</td></tr><tr><td style="text-align:left">screenshot</td><td style="text-align:left">false</td><td style="text-align:left">enable screenshot, if true, video and video poster must enable Cross-Origin</td></tr><tr><td style="text-align:left">id</td><td style="text-align:left">-</td><td style="text-align:left"><a target="_blank" rel="noopener external nofollow noreferrer" href="http://danmaku.id">danmaku.id</a>, danmaku pool id, it must be unique</td></tr><tr><td style="text-align:left">api</td><td style="text-align:left">-</td><td style="text-align:left">danmaku.api, see <a href="%5Bhttp://dplayer.js.org/guide.html#danmaku-api">Danmaku API</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="http://dplayer.js.org/guide.html#danmaku-api">http://dplayer.js.org/guide.html#danmaku-api</a>))</td></tr></tbody></table><p>上面有一个比较特殊的参数 flv，这里单独解释一下，这个参数是用于引入其他 js 文件的，目前支持的有：<code>hls</code> <code>dash</code> <code>shaka_dash</code> <code>flv</code> <code>webtorrent</code>，上述参数可多个一起使用，如果后面带有 js 地址，将直接使用，否则将使用 <code>_config.yml</code> 配置或插件默认配置，如：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;dplayer&quot; &quot;flv:&quot; &quot;url:a.flv&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedias &quot;dplayer&quot; &quot;flv:&quot; &quot;hls:[<span class="string">https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js&quot;</span>](<span class="link">https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js&quot;</span>) %&#125;</span><br><span class="line">&#123;</span><br><span class="line">video:</span><br><span class="line">&#123;</span><br><span class="line">quality:</span><br><span class="line">[</span><br><span class="line">&#123;</span><br><span class="line">name: &#x27;HLS&#x27;,</span><br><span class="line">url: &#x27;a.m3u8&#x27;,</span><br><span class="line">type: &#x27;hls&#x27;,</span><br><span class="line">&#125;,</span><br><span class="line">&#123;</span><br><span class="line">name: &#x27;FLV&#x27;,</span><br><span class="line">url: &#x27;demo.mp4&#x27;,</span><br><span class="line">type: &#x27;flv&#x27;,</span><br><span class="line">&#125;,</span><br><span class="line">],</span><br><span class="line">efaultQuality: 0,</span><br><span class="line">ic: &#x27;demo.png&#x27;,</span><br><span class="line">thumbnails: &#x27;thumbnails.jpg&#x27;,</span><br><span class="line">&#125;,</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endmmedias %&#125;</span><br></pre></td></tr></table></figure><p>不在表格内的参数请使用下面 JSON 类型的参数。</p><p>JSON 参数</p><p>mmedia 插件允许在 contents 部分使用 JSON 编写配置，由于允许使用 JSON5，此项配置几乎与 DPlayer 完全一致。</p><p>详情请见上方示例。</p><p>配置</p><p>默认配置可写入 <code>_config.yml</code> 下</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">dplayer:</span></span><br><span class="line">    <span class="attr">js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/dplayer@1/dist/DPlayer.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/dplayer@1/dist/DPlayer.min.js)</span></span><br><span class="line">    <span class="attr">hls_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js)</span></span><br><span class="line">    <span class="attr">dash_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js)</span></span><br><span class="line">    <span class="attr">shaka_dash_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js)</span></span><br><span class="line">    <span class="attr">flv_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js)</span></span><br><span class="line">    <span class="attr">webtorrent_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js)</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">contents:</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="mmedia-7"><p>介绍</p><p>可以插入 artplayer 标签。</p><p>使用</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;artplayer&quot; &quot;url:[<span class="string">https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4&quot;</span>](<span class="link">https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4&quot;</span>) %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedias &quot;artplayer&quot; &quot;flv:&quot;  %&#125;</span><br><span class="line">&#123;</span><br><span class="line">url: &quot;[<span class="string">https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4&quot;</span>](<span class="link">https://dandoc.u2sb.com/video/%E5%AE%89%E8%A3%85/1-%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AE%89%E8%A3%85.mp4&quot;</span>)</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endmmedias %&#125;</span><br></pre></td></tr></table></figure><p>参数</p><blockquote><p>此部分请熟读 <a href="%5Bhttps://artplayer.org/document/#/options">ArtPlayer 文档</a>](<a target="_blank" rel="noopener external nofollow noreferrer" href="https://artplayer.org/document/#/options">https://artplayer.org/document/#/options</a>))</p></blockquote><ul><li>使用 <code>:</code> 或 <code>=</code> 分割。</li></ul><p>详细参数表：</p><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">默认</th><th style="text-align:left">解释</th></tr></thead><tbody><tr><td style="text-align:left">url</td><td style="text-align:left">-</td><td style="text-align:left">url</td></tr><tr><td style="text-align:left">title</td><td style="text-align:left">-</td><td style="text-align:left">title</td></tr><tr><td style="text-align:left">poster</td><td style="text-align:left">-</td><td style="text-align:left">poster</td></tr><tr><td style="text-align:left">type</td><td style="text-align:left">-</td><td style="text-align:left">type</td></tr><tr><td style="text-align:left">autoplay</td><td style="text-align:left">false</td><td style="text-align:left">video autoplay</td></tr><tr><td style="text-align:left">loop</td><td style="text-align:left">false</td><td style="text-align:left">video loop</td></tr><tr><td style="text-align:left">volume</td><td style="text-align:left">0.7</td><td style="text-align:left">default volume</td></tr><tr><td style="text-align:left">style</td><td style="text-align:left">-</td><td style="text-align:left">style</td></tr></tbody></table><p>上面有一个比较特殊的参数 flv，这里单独解释一下，这个参数是用于引入其他 js 文件的，目前支持的有：<code>hls</code> <code>dash</code> <code>shaka_dash</code> <code>flv</code> <code>webtorrent</code>，上述参数可多个一起使用，如果后面带有 js 地址，将直接使用，否则将使用 <code>_config.yml</code> 配置或插件默认配置，如：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;artplayer&quot; &quot;flv:&quot; &quot;url:a.flv&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedias &quot;artplayer&quot; &quot;flv:&quot; &quot;hls:[<span class="string">https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js&quot;</span>](<span class="link">https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js&quot;</span>) %&#125;</span><br><span class="line">&#123;</span><br><span class="line">...</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endmmedias %&#125;</span><br></pre></td></tr></table></figure><p>不在表格内的参数请使用下面 JSON 类型的参数。</p><p>JSON 参数</p><p>mmedia 插件允许在 contents 部分使用 JSON 编写配置，由于允许使用 JSON5，此项配置几乎与 ArtPlayer 完全一致。</p><p>详情请见上方示例。</p><p>配置</p><p>默认配置可写入 <code>_config.yml</code> 下</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">artplayer:</span></span><br><span class="line">    <span class="attr">js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/artplayer@3/dist/artplayer.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/artplayer@3/dist/artplayer.js)</span></span><br><span class="line">    <span class="attr">hls_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js)</span></span><br><span class="line">    <span class="attr">dash_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js)</span></span><br><span class="line">    <span class="attr">shaka_dash_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js)</span></span><br><span class="line">    <span class="attr">flv_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js)</span></span><br><span class="line">    <span class="attr">webtorrent_js:</span> [<span class="string">https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js</span>]<span class="string">(https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js)</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">style:</span> <span class="string">width:100%;height:650px;max-width:1200px;center</span></span><br><span class="line">      <span class="attr">contents:</span></span><br><span class="line">        <span class="attr">autoSize:</span> <span class="literal">true</span></span><br><span class="line">        <span class="attr">autoMini:</span> <span class="literal">true</span></span><br><span class="line">        <span class="attr">fullscreen:</span> <span class="literal">true</span></span><br><span class="line">        <span class="attr">fullscreenWeb:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="mmedia-8"><p>介绍</p><p>可以插入 bilibili 视频</p><p>使用</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;bilibili&quot; &quot;bvid:BV1br4y1P7ND&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;bilibili&quot; &quot;bvid:BV1br4y1P7ND&quot; &quot;danmaku:false&quot; %&#125;</span><br></pre></td></tr></table></figure><p>参数</p><ul><li>使用 <code>:</code> 或 <code>=</code> 分割。</li></ul><p>详细参数表：</p><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">默认</th><th style="text-align:left">解释</th></tr></thead><tbody><tr><td style="text-align:left">aid</td><td style="text-align:left">-</td><td style="text-align:left">aid</td></tr><tr><td style="text-align:left">bvid</td><td style="text-align:left">-</td><td style="text-align:left">bvid，与 aid 同时出现时以 bvid 为准</td></tr><tr><td style="text-align:left">page</td><td style="text-align:left">1</td><td style="text-align:left">page</td></tr><tr><td style="text-align:left">danmaku</td><td style="text-align:left">true</td><td style="text-align:left">是否有弹幕 ture or false</td></tr><tr><td style="text-align:left">allowfullscreen</td><td style="text-align:left">allowfullscreen</td><td style="text-align:left">允许全屏， allowfullscreen 或 true 允许，其他选项不允许</td></tr><tr><td style="text-align:left">sandbox</td><td style="text-align:left">见 <a href="#%E9%85%8D%E7%BD%AE">配置</a></td><td style="text-align:left">iframe sandbox</td></tr><tr><td style="text-align:left">width</td><td style="text-align:left">100%</td><td style="text-align:left">css 属性</td></tr><tr><td style="text-align:left">max_width</td><td style="text-align:left">850px</td><td style="text-align:left">css 属性</td></tr><tr><td style="text-align:left">margin</td><td style="text-align:left">auto</td><td style="text-align:left">css 属性</td></tr></tbody></table><p>JSON 参数</p><p>mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。</p><p>配置</p><p>默认配置可写入 <code>_config.yml</code> 下</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">bilibili:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">page:</span> <span class="number">1</span></span><br><span class="line">      <span class="attr">danmaku:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">allowfullscreen:</span> <span class="string">allowfullscreen</span></span><br><span class="line">      <span class="attr">sandbox:</span> <span class="string">allow-top-navigation</span> <span class="string">allow-same-origin</span> <span class="string">allow-forms</span> <span class="string">allow-scripts</span> <span class="string">allow-popups</span></span><br><span class="line">      <span class="attr">width:</span> <span class="number">100</span><span class="string">%</span></span><br><span class="line">      <span class="attr">max_width:</span> <span class="string">850px</span></span><br><span class="line">      <span class="attr">margin:</span> <span class="string">auto</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="mmedia-9"><p>介绍</p><p>可以插入 西瓜 视频</p><p>使用</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;xigua&quot; &quot;xid=6925997698269053453&quot; %&#125;</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mmedia &quot;xigua&quot; &quot;xid:6925997698269053453&quot; &quot;autoplay:true&quot; %&#125;</span><br></pre></td></tr></table></figure><p>参数</p><ul><li>使用 <code>:</code> 或 <code>=</code> 分割。</li></ul><p>详细参数表：</p><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">默认</th><th style="text-align:left">解释</th></tr></thead><tbody><tr><td style="text-align:left">xid</td><td style="text-align:left">-</td><td style="text-align:left">西瓜视频的 ID，就是那一串数字</td></tr><tr><td style="text-align:left">id</td><td style="text-align:left">-</td><td style="text-align:left">一般情况下不需要填写</td></tr><tr><td style="text-align:left">autoplay</td><td style="text-align:left">false</td><td style="text-align:left">autoplay</td></tr><tr><td style="text-align:left">startTime</td><td style="text-align:left">0</td><td style="text-align:left">开始时间，秒</td></tr><tr><td style="text-align:left">allowfullscreen</td><td style="text-align:left">allowfullscreen</td><td style="text-align:left">允许全屏， allowfullscreen 或 true 允许，其他选项不允许</td></tr><tr><td style="text-align:left">sandbox</td><td style="text-align:left">见 <a href="#%E9%85%8D%E7%BD%AE">配置</a></td><td style="text-align:left">iframe sandbox</td></tr><tr><td style="text-align:left">width</td><td style="text-align:left">100%</td><td style="text-align:left">css 属性</td></tr><tr><td style="text-align:left">max_width</td><td style="text-align:left">850px</td><td style="text-align:left">css 属性</td></tr><tr><td style="text-align:left">margin</td><td style="text-align:left">auto</td><td style="text-align:left">css 属性</td></tr></tbody></table><p>JSON 参数</p><p>mmedia 插件允许在 contents 部分使用 JSON 编写配置，使用 JSON5 标准。</p><p>配置</p><p>默认配置可写入 <code>_config.yml</code> 下</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mmedia:</span></span><br><span class="line">  <span class="attr">xigua:</span></span><br><span class="line">    <span class="attr">default:</span></span><br><span class="line">      <span class="attr">autoplay:</span> <span class="literal">false</span></span><br><span class="line">      <span class="attr">startTime:</span> <span class="number">0</span></span><br><span class="line">      <span class="attr">allowfullscreen:</span> <span class="string">allowfullscreen</span></span><br><span class="line">      <span class="attr">sandbox:</span> <span class="string">allow-top-navigation</span> <span class="string">allow-same-origin</span> <span class="string">allow-forms</span> <span class="string">allow-scripts</span> <span class="string">allow-popups</span></span><br><span class="line">      <span class="attr">width:</span> <span class="number">100</span><span class="string">%</span></span><br><span class="line">      <span class="attr">max_width:</span> <span class="string">850px</span></span><br><span class="line">      <span class="attr">margin:</span> <span class="string">auto</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="mmedia-10"><p>待开发…</p></div><div class="tab-item-content active" id="mmedia-11"><p>请前往 <a target="_blank" href="/music">音乐界面</a> 预览部分效果，分别用到了 Artplayer, Aplayer, Dplayer, Meting</p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://blog.ccknbc.cc/">CC康纳百川</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://blog.ccknbc.cc/posts/introduction-of-plugin-tags-based-on-butterfly/">https://blog.ccknbc.cc/posts/introduction-of-plugin-tags-based-on-butterfly/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><i style="color:#8fbc8f" class="fa-brands fa-creative-commons"></i> <i style="color:#8fbc8f" class="fa-brands fa-creative-commons-by"></i> <i style="color:#8fbc8f" class="fa-brands fa-creative-commons-nc"></i> <i style="color:#8fbc8f" class="fa-brands fa-creative-commons-sa"></i> CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://blog.ccknbc.cc">CC的部落格</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a></div><div class="post_share"><div class="social-share" data-image="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/666ccfeb387717d69a0e3333cc1170dc_w1004_h591_s48.jpg" data-sites="wechat,weibo,qq,facebook,twitter"></div><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://jsd.cdn.zzko.cn/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i>赞赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://www.rocschool.com/tool/qr/qr/id/51.html" rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/qr.png" alt="三合一"></a><div class="post-qr-code-desc">三合一</div></li><li class="reward-item"><a href="https://afdian.net/@ccknbc" rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/afdian.png" alt="爱发电"></a><div class="post-qr-code-desc">爱发电</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/github-automatically-merges-pull-requests-notes/" title="GitHub 自动合并 PR 笔记"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/75d33bcc96205123aa3a40aae776d793_w2560_h1440_s704.jpg" onerror='onerror=null,src="https://jsd.cdn.zzko.cn/npm/hexo-theme-anzhiyu/source/img/friend_404.gif"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">GitHub 自动合并 PR 笔记</div></div></a></div><div class="next-post pull-right"><a href="/posts/awesome-status-pages/" title="很棒的状态页面"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/bef56211c33f87dc3435e8362e79befd_w1920_h1080_s1024.jpg" onerror='onerror=null,src="https://jsd.cdn.zzko.cn/npm/hexo-theme-anzhiyu/source/img/friend_404.gif"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">很棒的状态页面</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/hexo-webpushr-notification/" title="Hexo浏览器定向推送文章更新"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/d2a947d48815ed24936a919873b97841_w1366_h768_s31.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-05</div><div class="title">Hexo浏览器定向推送文章更新</div></div></a></div><div><a href="/posts/yuque-to-hexo/" title="语雀文章同步至Hexo笔记"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/721e476cb2661152b9c43621c94e3ed7_w1366_h768_s86.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-04</div><div class="title">语雀文章同步至Hexo笔记</div></div></a></div><div><a href="/posts/how-to-hide-hexo-articles-gracefully/" title="如何优雅隐藏 Hexo 文章"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/aa5ebc0731a66fa5fb73df76da759ae3_w1920_h1080_s557.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-22</div><div class="title">如何优雅隐藏 Hexo 文章</div></div></a></div><div><a href="/posts/google-adsense-configuration-manual/" title="Google Adsense 配置手册"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/0a77436f677dd11422579e07ba6423b3_w1920_h1080_s188.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-24</div><div class="title">Google Adsense 配置手册</div></div></a></div><div><a href="/posts/the-webp-road-of-blog-pictures/" title="博客图片的 WebP 之路"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/a4d78fbe1ca6e99e19535a095681c5ba_w1920_h1080_s770.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-11-29</div><div class="title">博客图片的 WebP 之路</div></div></a></div><div><a href="/posts/hexo-toss/" title="HEXO 折腾"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/45d888bd81b86777b3364e4a16ff72c6_w2240_h1260_s476.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-07-01</div><div class="title">HEXO 折腾</div></div></a></div></div></div><hr class="custom-hr"><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="waline-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8C%89%E9%92%AE-Button"><span class="toc-number">1.</span> <span class="toc-text">按钮 Button</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A1%8C%E5%86%85"><span class="toc-number">1.1.</span> <span class="toc-text">行内</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BA%E5%AE%9A"><span class="toc-number">1.2.</span> <span class="toc-text">固定</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%85%E4%B8%AD%E5%A4%9A%E4%B8%AA"><span class="toc-number">1.3.</span> <span class="toc-text">居中多个</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8C%89%E9%92%AE-btns"><span class="toc-number">2.</span> <span class="toc-text">按钮 btns</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F-text"><span class="toc-number">3.</span> <span class="toc-text">行内文本样式 text</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E6%96%87%E6%9C%AC-span"><span class="toc-number">4.</span> <span class="toc-text">行内文本 span</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%AE%B5%E8%90%BD%E6%96%87%E6%9C%AC-p"><span class="toc-number">5.</span> <span class="toc-text">段落文本 p</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%95%E7%94%A8-note"><span class="toc-number">6.</span> <span class="toc-text">引用 note</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%8A%E6%A0%87%E6%A0%87%E7%AD%BE-tip"><span class="toc-number">7.</span> <span class="toc-text">上标标签 tip</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A8%E6%80%81%E6%A0%87%E7%AD%BE-anima"><span class="toc-number">8.</span> <span class="toc-text">动态标签 anima</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%95%E9%80%89%E5%88%97%E8%A1%A8-radio"><span class="toc-number">9.</span> <span class="toc-text">单选列表 radio</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%8D%E9%80%89%E5%88%97%E8%A1%A8-checkbox"><span class="toc-number">10.</span> <span class="toc-text">复选列表 checkbox</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%B6%E9%97%B4%E8%BD%B4-timeline"><span class="toc-number">11.</span> <span class="toc-text">时间轴 timeline</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%93%BE%E6%8E%A5%E5%8D%A1%E7%89%87-link"><span class="toc-number">12.</span> <span class="toc-text">链接卡片 link</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#github-%E5%8D%A1%E7%89%87-ghcard"><span class="toc-number">13.</span> <span class="toc-text">github 卡片 ghcard</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#github-%E5%BE%BD%E6%A0%87-ghbdage"><span class="toc-number">14.</span> <span class="toc-text">github 徽标 ghbdage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BD%91%E7%AB%99%E5%8D%A1%E7%89%87-sites"><span class="toc-number">15.</span> <span class="toc-text">网站卡片 sites</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E5%9B%BE%E7%89%87-inlineimage"><span class="toc-number">16.</span> <span class="toc-text">行内图片 inlineimage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%95%E5%BC%A0%E5%9B%BE%E7%89%87-image"><span class="toc-number">17.</span> <span class="toc-text">单张图片 image</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9F%B3%E9%A2%91-audio"><span class="toc-number">18.</span> <span class="toc-text">音频 audio</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%86%E9%A2%91-video"><span class="toc-number">19.</span> <span class="toc-text">视频 video</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%B8%E5%86%8C-gallery"><span class="toc-number">20.</span> <span class="toc-text">相册 gallery</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9A%90%E8%97%8F%E6%8A%98%E5%8F%A0-tag-hide"><span class="toc-number">21.</span> <span class="toc-text">隐藏折叠 tag-hide</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#hide-inline"><span class="toc-number">21.1.</span> <span class="toc-text">hide-inline</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#hide-block"><span class="toc-number">21.2.</span> <span class="toc-text">hide-block</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#hide-toggle"><span class="toc-number">21.3.</span> <span class="toc-text">hide-toggle</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8A%98%E5%8F%A0%E6%A1%86-folding"><span class="toc-number">22.</span> <span class="toc-text">折叠框 folding</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%86%E6%A0%8F-tab"><span class="toc-number">23.</span> <span class="toc-text">分栏 tab</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E9%9B%86%E5%90%88-issues"><span class="toc-number">24.</span> <span class="toc-text">数据集合 issues</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%97%E8%AF%8D%E6%A0%87%E7%AD%BE-poem"><span class="toc-number">25.</span> <span class="toc-text">诗词标签 poem</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%9B%E5%BA%A6%E6%9D%A1-progress"><span class="toc-number">26.</span> <span class="toc-text">进度条 progress</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mermaid"><span class="toc-number">27.</span> <span class="toc-text">mermaid</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A8%E6%80%81%E5%9B%BE%E8%A1%A8-chartjs"><span class="toc-number">28.</span> <span class="toc-text">动态图表 chartjs</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AA%92%E4%BD%93-mmedia"><span class="toc-number">29.</span> <span class="toc-text">媒体 mmedia</span></a></li></ol></div></div></div></div></main><footer id="footer" style="background:linear-gradient(135deg,#fff1eb,#ace0f9)"><div id="footer-wrap"><div class="icp"><a target="_blank" rel="noopener external nofollow noreferrer" href="https://beian.miit.gov.cn"><img class="icp-icon" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/icp.png" alt="ICP"><span>鄂 ICP 备 2020019764 号</span></a></div><div class="gongan"><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42088102000092"><img class="gongan-icon" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/gongan.png" alt="gongan"><span>鄂公网安备 42088102000092 号</span></a></div><div class="live"><span>本站已运行</span><span id="display_live"></span><span class="moe-text">CCKNBC All Rights Reserved.</span><script>function blog_live(){window.setTimeout(blog_live,1e3);var e=new Date("2020-06-04T00:00:00"),o=new Date,l=o.getFullYear(),o=o.getTime()-e.getTime(),e=864e5,t=365*e,i=Math.floor(o/t),t=Math.floor(o%t/e),e=Math.floor(o%e/60/60/1e3),a=Math.floor(o%36e5/60/1e3),o=Math.floor(o%6e4/1e3);display_live.innerHTML=" "+i+" 年 "+t+" 天 "+e+" 小时 "+a+" 分 "+o+" 秒<br>&copy; 2020 - "+l+" "}blog_live()</script></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><a class="edit-yuque" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.yuque.com/ccknbc/blog/22/edit/" title="在语雀上以富文本格式编辑/预览 - Hexo标签笔记"><i class="fa-solid fa-crow"></i></a><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fa-solid fa-arrows-alt-h"></i></button><button id="readmode" type="button" title="阅读模式"><i class="fa-solid fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fa-solid fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fa-solid fa-cog"></i></button><button id="share-link" type="button" title="分享链接"><i class="fa-solid fa-share"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fa-solid fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fa-solid fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fa-solid fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://jsd.cdn.zzko.cn/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script><script src="https://jsd.cdn.zzko.cn/npm/instant.page/instantpage.js" type="module"></script><script src="https://jsd.cdn.zzko.cn/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://jsd.cdn.zzko.cn/npm/node-snackbar/dist/snackbar.min.js"></script><div class="js-pjax"><script>(()=>{var e=()=>{var e;const t=document.querySelectorAll("#article-container .mermaid-wrap");0!==t.length&&(e=()=>{{var e=t;window.loadMermaid=!0;const a="dark"===document.documentElement.getAttribute("data-theme")?"dark":"default";Array.from(e).forEach((e,t)=>{const n=e.firstElementChild;e="%%{init:{ 'theme':'"+a+"'}}%%\n"+n.textContent;const d=mermaid.render("mermaid-"+t,e);"string"==typeof d?(t=d,n.insertAdjacentHTML("afterend",t)):d.then(({svg:e})=>{n.insertAdjacentHTML("afterend",e)})})}},btf.addGlobalFn("themeChange",e,"mermaid"),window.loadMermaid?e():btf.getScript("https://jsd.cdn.zzko.cn/npm/mermaid/dist/mermaid.min.js").then(e))};btf.addGlobalFn("encrypt",e,"mermaid"),window.pjax?e():document.addEventListener("DOMContentLoaded",e)})()</script><script>(()=>{let n=window.walineFn||null;const t=e=>{const n=e(Object.assign({el:"#waline-wrap",serverURL:"https://waline.ccknbc.cc",pageview:!1,dark:'html[data-theme="dark"]',path:window.location.pathname,comment:!1,imageUploader:function(e){var n=new FormData,t=new Headers;return n.append("file",e),n.append("album_id","10"),n.append("permission","0"),t.append("Authorization","Bearer 24|o8Crl5y0oK3luyUs17fBxDtAcevk1iiLHVFMNjpA"),t.append("Accept","application/json"),fetch("https://wmimg.com/api/v1/upload",{method:"POST",headers:t,body:n}).then(e=>e.json()).then(e=>e.data.links.url)}},{pageSize:10,meta:["nick","mail","link"],requiredMeta:["nick","mail"],login:"force",copyright:!0,search:!0,turnstileKey:"0x4AAAAAAAECBl27OB5SZrQT",locale:{admin:"博主",sofa:"这里冷冷清清的，快来留下脚印吧！",placeholder:"根据《互联网跟帖评论服务管理规定》，将展示您的归属地，并开启强制注册登录后才允许评论\n社交登录现已支持【QQ Weibo GitHub X Facebook】等平台，登录后可点击头像更改个人主页地址，方便CC串门\n在评论框粘贴图片，自动上传至图床，请不要将评论区作为您的图床，更不要上传违法图片，谢谢合作",reactionTitle:"就现在，表明你的态度！",reaction0:"鼓励",reaction1:"菜狗",reaction2:"正确",reaction3:"错误",reaction4:"思考",reaction5:"无聊",level0:"买菜",level1:"切菜",level2:"炒菜",level3:"煲汤",level4:"煮面",level5:"上桌",level6:"开吃"},emoji:["https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/"],reaction:["https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/鼓掌.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/菜狗.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/正确.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/错误.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/思考.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/睡觉.png"]}));btf.addGlobalFn("pjax",()=>{n.destroy()},"destroyWaline")};var e=()=>{n?t(n):(btf.getCSS("https://jsd.cdn.zzko.cn/npm/@waline/client/dist/waline.css"),btf.getCSS("https://jsd.cdn.zzko.cn/npm/@waline/client/dist/waline-meta.css").then(()=>import("https://jsd.cdn.zzko.cn/npm/@waline/client/dist/waline.js")).then(({init:e})=>{n=e||Waline.init,t(n),window.walineFn=n}))};btf.loadComment(document.getElementById("waline-wrap"),e)})()</script></div><script>window.addEventListener("load",()=>{const t=e=>e=""!==e&&150<(e=(e=(e=(e=e.replace(/<img.*?src="(.*?)"?[^\>]+>/gi,"[图片]")).replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,"[链接]")).replace(/<pre><code>.*?<\/pre>/gi,"[代码]")).replace(/<[^>]+>/g,"")).length?e.substring(0,150)+"...":e,a=t=>{let a="";if(t.length)for(let e=0;e<t.length;e++)a=(a+="<div class='aside-list-item'>")+`<div class='content'>
        <a class='comment' href='${t[e].url}' title='${t[e].content}'>${t[e].content}</a>
        <div class='name'><span>${t[e].nick} / </span><time datetime="${t[e].date}">${btf.diffDate(t[e].date,!0)}</time></div>
        </div></div>`;else a+="没有评论";var e=document.querySelector("#card-newest-comments .aside-list");e&&(e.innerHTML=a),window.lazyLoadInstance&&window.lazyLoadInstance.update(),window.pjax&&window.pjax.refresh(e)};var e=()=>{var e;document.querySelector("#card-newest-comments .aside-list")&&((e=btf.saveToLocal.get("waline-newest-comments"))?a(JSON.parse(e)):(async()=>{try{var e=(await(await fetch("https://waline.ccknbc.cc/api/comment?type=recent&count=3",{method:"GET"})).json()).data.map(e=>({content:t(e.comment),avatar:e.avatar,nick:e.nick,url:e.url+"#post-comment",date:e.time||e.insertedAt}));btf.saveToLocal.set("waline-newest-comments",JSON.stringify(e),10/1440),a(e)}catch(e){console.error(e),document.querySelector("#card-newest-comments .aside-list").textContent="无法获取评论，请确认相关配置是否正确"}})())};e(),btf.addGlobalFn("pjaxComplete",e,"waline_newestComment")})</script><script defer src="/js/custom.js"></script><script src="https://jsd.cdn.zzko.cn/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!1,scrollRestoration:!1});const triggerPjaxFn=e=>{e&&Object.values(e).forEach(e=>{e()})};document.addEventListener("pjax:send",function(){btf.removeGlobalFnEvent("pjax"),btf.removeGlobalFnEvent("themeChange");var e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),triggerPjaxFn(window.globalFn.pjaxSend)}),document.addEventListener("pjax:complete",()=>{document.querySelectorAll("script[data-pjax]").forEach(e=>{const t=document.createElement("script");var a=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach(e=>t.setAttribute(e.name,e.value)),t.appendChild(document.createTextNode(a)),e.parentNode.replaceChild(t,e)}),triggerPjaxFn(window.globalFn.pjaxComplete)}),document.addEventListener("pjax:error",e=>{404===e.request.status&&pjax.loadUrl("/404")})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/@docsearch/css/dist/style.css"><script src="https://jsd.cdn.zzko.cn/npm/@docsearch/js/dist/umd/index.js"></script><script>(()=>{docsearch(Object.assign({appId:"97MUPN4DMC",apiKey:"a003a39f337f5186ec11f5f92bae62b3",indexName:"ccknbc",container:"#docsearch"},{placeholder:"Ctrl/⌘ + K 唤醒搜索服务",maxResultsPerGroup:7,translations:{button:{buttonText:"搜索",buttonAriaLabel:"搜索"},modal:{searchBox:{resetButtonTitle:"清空",resetButtonAriaLabel:"清空",cancelButtonText:"取消",cancelButtonAriaLabel:"取消"},startScreen:{recentSearchesTitle:"最近搜索历史",noRecentSearchesText:"搜索历史为空",saveRecentSearchButtonTitle:"保存搜索记录",removeRecentSearchButtonTitle:"清除搜索记录",favoriteSearchesTitle:"收藏夹",removeFavoriteSearchButtonTitle:"移出收藏夹"},errorScreen:{titleText:"未能获取搜索结果",helpText:"您可能需要检查您的网络连接"},footer:{selectText:"选择",selectKeyAriaLabel:"回车键",navigateText:"切换",navigateUpKeyAriaLabel:"方向键上",navigateDownKeyAriaLabel:"方向键下",closeText:"关闭",closeKeyAriaLabel:"退出键",searchByText:"搜索服务提供: DocSearch by"},noResultsScreen:{noResultsText:"未搜索到相关内容",suggestedQueryText:"您可尝试搜索",reportMissingResultsText:"确认搜索结果是正确的？",reportMissingResultsLinkText:"反馈给Algolia"}}}}));const e=()=>{document.querySelector(".DocSearch-Button").click()};var t=()=>{btf.addEventListenerPjax(document.querySelector("#search-button > .search"),"click",e)};t(),window.addEventListener("pjax:complete",t)})()</script></div></div><script>const copyright_enable=!0</script><script src="https://jsd.cdn.zzko.cn/npm/turndown/dist/turndown.min.js"></script><script src="https://jsd.cdn.zzko.cn/gh/ccknbc-forked/hexo-butterfly-copymarkdown/lib/copyMarkdown.min.js"></script><script src="https://jsd.cdn.zzko.cn/gh/ccknbc-forked/hexo-butterfly-copymarkdown/lib/reprint.min.js"></script><script>(function (w, d, s, id) {
        if (typeof (w.webpushr) !== 'undefined') return;
        w.webpushr = w.webpushr || function () { (w.webpushr.q = w.webpushr.q || []).push(arguments) };
        var js, fjs = d.getElementsByTagName(s)[0];
        js = d.createElement(s);
        js.id = id;
        js.async = 1;
        js.src = "https://cdn.webpushr.com/app.min.js";
        fjs.parentNode.appendChild(js);
        }(window, document, 'script', 'webpushr-jssdk'));

        webpushr('setup', {
        'key': 'BB9Y-w9p3u0CKA7UP9nupB6I-_NqE2MuODmKJjyC4W2YflX06Ff_hEhrNJfonrut5l6gCa28gC83q2OII7Qv-oA',
        'sw': 'none'
        });
        </script></body></html>